echarts 柱状图+折线+文字倾斜及省略
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>柱状图、折线图</title>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="./js/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="demo" style="width: 450px;height: 300px"></div>
</body>
<script>
/*
* 知识点：
* 1、各个线条颜色设置
* 2、X轴 坐标文字过长 倾斜、拼接省略号显示
* 3、异步插入图表数据
* */ //初始化一个 echarts 实例
var chart = echarts.init(document.getElementById('demo'));
//指定图表的配置项和数据
var option = {
backgroundColor: 'rgba(70, 131, 254, .3)',//设置背景色
tooltip: {//提示框组件
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {//图例组件
data:[{name:'已解决',icon:'circle'},{name:'未解决',icon:'circle'},{name:'总量'}],
textStyle:{
color:'#ffffff',
fontSize:12
},
y: 'bottom',
x: 'center' ,
},
xAxis: [//直角坐标系 grid 中的 x 轴
{
type: 'category',
axisLine:{
lineStyle:{
color:'#999999',//设置X轴颜色
width:1
}
},
data: [],//数据留待异步插入
axisPointer: {
type: 'shadow'
},
axisLabel:{
interval:0,//横轴信息全部显示
rotate:45,//度角倾斜显示
formatter:function(value){//只显示五个字 其余省略号
return value.length > 5?value.substring(0,5)+'...':value;
}
}
}
],
yAxis: [//直角坐标系 grid 中的 y 轴
{
type: 'value',
splitLine:{
show:true ,
lineStyle:{
color:'#ab0e23',//设置Y轴 分隔线 颜色
width: 1
}
},
axisLine:{
lineStyle:{
color:'#999999',//设置Y轴颜色
width:1
}
},
name: '单位（个）',
// min: 0,//Y坐标最小值
// max: 1000,Y坐标最大值
// interval: 50,//坐标间隔
}
],
series : [
{
name:'已解决',
barWidth: '30%',
type:'bar',//柱状/条形图
itemStyle : {
color: '#6AC3F1'
},
data:[]//数据留待异步插入
},
{
name:'未解决',
barWidth: '30%',
type:'bar',//柱状/条形图
itemStyle : {
color: '#DD6B25'
},
data:[]//数据留待异步插入
},
{
name:'总量',
type:'line',//折线图
itemStyle : {
color: '#009944'
},
yAxisIndex: 0,
data:[]//数据留待异步插入
}
],
}; //使用刚指定的配置项和数据显示图表。
chart.setOption(option);
//异步插入图表数据
getChartData(chart) ; //获取图表数据并插入
function getChartData() {
// $.ajax({
// url: '/api/...',
// data: {},
// type: "POST",
// dataType: 'json',
// success: function(result){
var result = {
meg:'处理成功',
req:true,
rows:[
{
name: "部门一",
notSolveCount: 312,
solveCount: 42,
},
{
name: "部门二",
notSolveCount: 312,
solveCount: 200,
},
{
name: "部门三",
notSolveCount: 312,
solveCount: 42,
},
{
name: "很长名字的部门",
notSolveCount: 312,
solveCount: 42,
}, {
name: "部门四",
notSolveCount: 555,
solveCount: 42,
}, {
name: "部门五",
notSolveCount: 312,
solveCount: 42,
}, {
name: "很长名字的部门",
notSolveCount: 312,
solveCount: 42,
}, {
name: "很长名字的部门",
notSolveCount: 750,
solveCount: 42,
},
{
name: "很长名字的部门",
notSolveCount: 312,
solveCount: 42,
},
{
name: "很长名字的部门",
notSolveCount: 312,
solveCount: 42,
},
{
name: "很长名字的部门",
notSolveCount: 312,
solveCount: 42,
},
{
name: "很长名字的部门",
notSolveCount: 312,
solveCount: 500,
},
]
}
var _name = [], _resolved = [] , _unsolved = [] , _gross = [];
if (result.rows.length > 0) {
$.each(result.rows,function (i,v) {
_name.push(v.name);
_resolved.push(v.solveCount);
_unsolved.push(v.notSolveCount);
_gross.push(v.notSolveCount + v.solveCount);
});
//像图表中插入数据
chart.setOption({
series : [
{
data:_resolved
},
{
data:_unsolved
},
{
data:_gross
}
],
xAxis : [
{
data:_name
}
]
});
}
// }
// });
}
</script>
</html>
echarts 柱状图+折线+文字倾斜及省略的更多相关文章
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- 关于echarts绘制树图形的注意事项(文字倾斜、数据更新、缓存重绘问题等)
最近项目中使用到echarts的树操作,对其中几点注意事项进行下总结. 效果图: 1.基础配置 options的配置如下: { tooltip: { trigger: 'item', triggerO ...
- [置顶]
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- 2-Highcharts 3D图之3D柱状图带可调试倾斜角度
<!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度< ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- Asp.net 用 Graphics 统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- Echarts柱状图实现不同颜色渐变色
第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...
- echarts x轴文字显示不全解决办法
标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694
随机推荐
- 通过 Drone Rest API 获取构建记录日志
Drone是一款CICD工具,提供rest API,简单介绍下如何使用API 获取构建日志. 获取token 登录进入drone,点头像,在菜单里选择token 复制token即可 API 介绍 Dr ...
- sql手工注入1
手工注入常规思路 1.判断是否存在注入,注入是字符型还是数字型 2.猜解 SQL 查询语句中的字段数 3.确定显示的字段顺序 4.获取当前数据库 5.获取数据库中的表 6.获取表中的字段名 7.查询到 ...
- Cesium专栏-Billboard加载Gif图片
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
- iOS核心动画高级技巧 - 6
11. 基于定时器的动画 基于定时器的动画 我可以指导你,但是你必须按照我说的做. -- 骇客帝国 在第10章“缓冲”中,我们研究了CAMediaTimingFunction,它是一个通过控制动画缓冲 ...
- Cortex-A7处理器算数运算指令和逻辑运算指令
汇编中也可以进行算术运算, 比如加减乘除,常用的运算指令用法如表所示: 常用运算指令 在嵌入式开发中最常会用的就是加减指令,乘除基本用不到. 我们用 C 语言进行CPU 寄存器配置的时候常常需要用 ...
- AVProVideo 在android 真机使用经验分享
AVProVideo 在 android 方面 如果想使用必须进行合理的设置:如图 发布的时候设置: 如果想使用代码替换播放视频: 第一步:设置 PlatformOptionsAndroid.ove ...
- REST架构指导方案
目录 REST架构指导方案 何为REST 在WEB系统中应用REST风格 应用约束 对资源应用正确的动词语义 名词性的URI地址 RESTFUL的URL路径实践 单一资源的路径制定 复杂查询的路径制定 ...
- weed3-1.hello world
Weed3 一个微型ORM框架(只有0.1Mb哦) 源码:https://github.com/noear/weed3 源码:https://gitee.com/noear/weed3 05年的时候开 ...
- Ajax之处理不同格式的JSON数据
JSON是一种网络中的数据格式,主要用于网络间的数据传输,它比XML格式的数据传输速度快,使用更广. 1.Ajax处理对象格式的JSON数据: <script src="../JS/j ...
- C#版本与.NET版本对应关系以及各版本的特性
C#版本 .NET版本 发布日期 特性 C# 1.0 .NET Framework 1.0 2002-02-13 委托.事件 C# 1.1 .NET Framework 1.1 2003-04-24 ...