ehcarts折线图
来源:互联网 发布:java 邮箱匹配 编辑:程序博客网 时间:2024/04/27 06:33
一 . 问题汇总: 折线图问题与解决
- 折线图中的多条折线,怎么设置?
- 怎么设置echarts的背景颜色?
- 怎么设置X轴,Y轴的坐标线的颜色?
- 怎么将X轴的数据倾斜显示?
- 怎么让你的折线有弧度?
初始样式如图,以及要解决的问题:
二. 前提准备条件
- 要使用echarts,首先要在你的页面中
引入echarts.js
; - 要在.html文件中,设置一个
容器
,并给它设置宽高属性
;- 再次声明,
必须给容器设置宽高
,它是用来给画布提供一个空间
,否则是不会显示的;
- 再次声明,
- 最后就是关于echarts的配置;
- 可以单独写一个js文件,然后引进来;
- 也可以直接在index.html中写一个
<script> // 相关代码 </script>
index.html文件代码如下:
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title></title> <!--第一步: 引入 ECharts 文件 --> <script src="js/node_modules/echarts/dist/echarts.min.js"></script> </head> <body> <!--第二步:指定一个容器用来存放echarts,也就是一个设置宽高属性的 DOM节点 --> <div id="box" style="width: 600px;height:400px;"></div> </body></html>
我这里图方便,js就直接写在html文件里了
<script>// 获取到这个DOM节点,然后初始化 var myChart = echarts.init(document.getElementById("box"));// option 里面的内容基本涵盖你要画的图表的所有内容 var option = { // 定义样式和数据 }// 一定不要忘了这个,具体是干啥的我忘了,官网是这样写的使用刚指定的配置项和数据显示图表。 myChart.setOption(option);</script>
注意:
你在写myChart.setOption(option);
这行代码的时候一定不要忘了这个myChart
是要和你上面定义的var 变量名
对应起来,比如var myChart = echarts.init(document.getElementById("box"));
举个栗子吧:
如果你定义的变量名
是oMyChart
,那你就这样写:
var oMyChart = echarts.init(document.getElementById("box"));var option = { // 定义样式和数据 }oMyChart.setOption(option);
关键内容都在option中
var option = { backgroundColor: '#FBFBFB', tooltip : { trigger: 'axis' }, legend: { data:['充值','消费'] }, calculable : true, xAxis : [ { axisLabel:{ rotate: 30, interval:0 }, axisLine:{ lineStyle :{ color: '#CECECE' } }, type : 'category', boundaryGap : false, data : function (){ var list = []; for (var i = 10; i <= 18; i++) { if(i<= 12){ list.push('2016-'+i + '-01'); }else{ list.push('2017-'+(i-12) + '-01'); } } return list; }() } ], yAxis : [ { type : 'value', axisLine:{ lineStyle :{ color: '#CECECE' } } } ], series : [ { name:'充值', type:'line', symbol:'none', smooth: 0.2, color:['#66AEDE'], data:[800, 300, 500, 800, 300, 600,500,600] }, { name:'消费', type:'line', symbol:'none', smooth: 0.2, color:['#90EC7D'], data:[600, 300, 400, 200, 300, 300,200,400] } ] };
三. 问题解决
3.1 怎么给echarts的容器添加背景色?
这是我碰到的第一个坑,你是不是和我一样,直接给容器添加了background-color
属性,但是你会发现并没有什么卵用
代码如下:
<div id="box" style="width: 600px; height:400px; background-color: pink;"></div>
效果如下:
你会发现背景色应用不上,这里我自己认为,echarts画折线图什么的,就相当于是使用canvas在画图,它在画图前已经将画布初始化了,所以给容器添加背景色是不行的,那么怎么办呢?
解决办法:
- 要在
option
echarts图的配置中进行配置,添加background-color
属性; - 为了区别,看看到底是给
容器
添加的背景色应用上了,还是option
中的背景色应用上了; - 我们设置
容器背景为粉色
,设置echarts中的option为#FBFBFB
;
代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title></title> <script src="js/node_modules/echarts/dist/echarts.min.js"></script></head><body> <div id="box" style="width: 1000px; height:500px; background-color: pink;"></div> <script> // 获取到这个DOM节点,然后初始化 var myChart = echarts.init(document.getElementById("box")); // option 里面的内容基本涵盖你要画的图表的所有内容 // 定义样式和数据 var option = { // 给echarts图设置背景色 backgroundColor: '#FBFBFB', // -----------> // 给echarts图设置背景色 tooltip: { trigger: 'axis' }, legend: { data: ['充值', '消费'] }, calculable: true, xAxis: [{ type: 'category', // boundaryGap: false, data: function() { var list = []; for (var i = 10; i <= 18; i++) { if (i <= 12) { list.push('2016-' + i + '-01'); } else { list.push('2017-' + (i - 12) + '-01'); } } return list; }() }], yAxis: [{ type: 'value' }], series: [{ name: '充值', type: 'line', data: [800, 300, 500, 800, 300, 600, 500, 600] }, { name: '消费', type: 'line', data: [600, 300, 400, 200, 300, 300, 200, 400] }] }; // 一定不要忘了这个,具体是干啥的我忘了,官网是这样写的使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body></html>
区别以及效果:
在这里我同时给容器添加背景色,在echarts配置中设置背景色,一会我们看看是哪个背景色作用上了,代码如下:
很显然,配置里的背景色应用上了,所以直接给容器设置背景是行不通的,效果如图所示:
3.2 怎么设置多条折线以及每条折线的颜色
- 在
series
中以数组形式添加多组数据即可; - 在每条折线里面直接添加
color: ['相应的颜色']
代码如下:
效果图如下:
3.3 去掉小圆点
- 设置
symbol: 'none'
代码对比:
效果对比:
3.4 设置折线图的弧度
- 设置
smooth
属性 - 属性值在
0-1
之间
代码对比图:
效果对比图:
3.5 设置坐标轴的颜色
为了让效果颜色更加明显,就给坐标轴添加比较显眼的颜色,只做个示范用,项目中肯定不会用这么重的颜色,一般使用灰色系的颜色比较淡的
- 设置X轴颜色为红色
- 在xAxis下添加
axisLine: { lineStyle: { color: 'red' } },
- 同理设置Y轴
代码:
效果图:
3.6 怎么让折线图从X轴0刻度开始
- 设置
boundaryGap: false,
代码如下:
效果如下:
3.7 怎么让X轴的时间这组数据旋转
有时候我们X轴数据比较长又比较多的时候,水平放置肯定成不下,那我们就让它倾斜着放,这样就可以放更多的数据。
好了,废话不多说,看代码:
效果如图:
四. 突然发现我写的有个小问题,少了一组数据,很尴尬的赶脚
- 你可以直接在
data
中添加一组数据 - 哈哈,我比较懒,就直接修改那个判断条件,
将i<=18改成i<18;
完整的代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title></title> <script src="js/node_modules/echarts/dist/echarts.min.js"></script></head><body> <div id="box" style="width: 1000px; height:500px; background-color: pink;"></div> <script> // 获取到这个DOM节点,然后初始化 var myChart = echarts.init(document.getElementById("box")); // option 里面的内容基本涵盖你要画的图表的所有内容 var option = { // 定义样式和数据 backgroundColor: '#FBFBFB', tooltip: { trigger: 'axis' }, legend: { data: ['充值', '消费'] }, calculable: true, xAxis: [{ axisLabel: { rotate: 30, interval: 0 }, axisLine: { lineStyle: { color: 'red' } }, type: 'category', boundaryGap: false, data: function() { var list = []; for (var i = 10; i < 18; i++) { if (i <= 12) { list.push('2016-' + i + '-01'); } else { list.push('2017-' + (i - 12) + '-01'); } } return list; }() }], yAxis: [{ type: 'value', axisLine: { lineStyle: { color: '#CECECE' } } }], series: [{ name: '充值', type: 'line', symbol: 'none', smooth: 0.3, color: ['#66AEDE'], data: [800, 300, 500, 800, 300, 600, 500, 600] }, { name: '消费', type: 'line', symbol: 'none', smooth: 0.3, color: ['#90EC7D'], data: [600, 300, 400, 200, 300, 300, 200, 400] }] }; // 一定不要忘了这个,具体是干啥的我忘了,官网是这样写的使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body></html>
效果如图:
作者:_信仰zmh
链接:http://www.jianshu.com/p/8cac22daca98
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
- ehcarts折线图
- ehcarts 图表
- 折线图
- 折线图
- 折线图
- 折线图
- 折线图
- 折线图
- SpagoBI Ehcarts整合
- ehcarts省份热力图实例
- 折线图(一)绘制折线图坐标轴
- 折线图 自定义折线图 自定义view
- 安卓折线图折线图charts
- Highcharts折线图折线不显示
- echarts折线图更改折线点类型
- VML-折线图
- 动态生成折线图
- 动态画折线图
- Mysql-mytop安装与使用
- Openjudge 2987 小兔子捡金币
- Discuz!X前台任意文件删除漏洞
- opencv: 图像缩放(cv2.resize)
- [BZOJ]4443 [SCOI2015] 小凸玩矩阵 二分答案 + 二分图最大匹配
- ehcarts折线图
- Hibernate中常见问题 No row with the given identifier exists问题的原因及解决
- [集合]Java的集合框架 Collection集合
- Tablayout
- MIT18.06线性代数课程笔记3b:矩阵的逆元
- String的拆分和替换
- SpringMVC执行流程
- STM32——PB4、PB3、PA15 IO不受控问题,JTAG IO
- OCX控件注册及无法注册原因总结