之前自学的时候也使用过echarts来制作柱状图，折线图，地图，现在想想那时候做的简直是太LOW了，就是简单的在官网上，模仿人家的示例代码，改改数据，就可以了，原生态的，样子果然是很丑。
在我们的项目中，我们自己封装了echarts指令，只用自己定义一下样式，然后调用数据接口，就可以了，这里先不多说封装指令了，现在先说说怎么调整样式
我自己写的一个代码为例，以折线图为例
一 . 问题汇总： 折线图问题与解决
折线图中的多条折线，怎么设置？
怎么设置echarts的背景颜色？
怎么设置X轴，Y轴的坐标线的颜色？
怎么将X轴的数据倾斜显示？
怎么让你的折线有弧度？
初始样式如图，以及要解决的问题：
我的博客地址 http://blog.zhouminghang.xyz
二. 前提准备条件
要使用echarts，首先要在你的页面中引入echarts.js；
要在.html文件中，设置一个容器，并给它设置宽高属性；
再次声明，必须给容器设置宽高，它是用来给画布提供一个空间，否则是不会显示的；
最后就是关于echarts的配置；
可以单独写一个js文件，然后引进来；
也可以直接在index.html中写一个 // 相关代码
index.html文件代码如下：
我这里图方便，js就直接写在html文件里了
// 获取到这个DOM节点，然后初始化varmyChart = echarts.init(document.getElementById("box"));// option 里面的内容基本涵盖你要画的图表的所有内容varoption = {// 定义样式和数据}// 一定不要忘了这个，具体是干啥的我忘了，官网是这样写的使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
注意：
你在写myChart.setOption(option);这行代码的时候一定不要忘了这个myChart是要和你上面定义的var 变量名对应起来，比如var myChart = echarts.init(document.getElementById("box"));
举个栗子吧：
如果你定义的变量名是oMyChart,那你就这样写：
varoMyChart = echarts.init(document.getElementById("box"));varoption = {// 定义样式和数据}oMyChart.setOption(option);
关键内容都在option中
varoption = { 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(){varlist= [];for(vari =10; i <=18; i++) {if(i<=12){list.push('2016-'+i +'-01'); }else{list.push('2017-'+(i-12) +'-01'); } }returnlist; }() } ], 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属性，但是你会发现并没有什么卵用
代码如下：
效果如下：
我的博客地址 http://blog.zhouminghang.xyz
你会发现背景色应用不上，这里我自己认为，echarts画折线图什么的，就相当于是使用canvas在画图，它在画图前已经将画布初始化了，所以给容器添加背景色是不行的，那么怎么办呢？
解决办法：
要在optionecharts图的配置中进行配置，添加background-color属性；
为了区别，看看到底是给容器添加的背景色应用上了，还是option中的背景色应用上了；
我们设置容器背景为粉色，设置echarts中的option为#FBFBFB；
代码如下：
// 获取到这个DOM节点，然后初始化varmyChart = echarts.init(document.getElementById("box"));// option 里面的内容基本涵盖你要画的图表的所有内容// 定义样式和数据varoption = {// 给echarts图设置背景色backgroundColor:'#FBFBFB',// -----------> // 给echarts图设置背景色 tooltip: {trigger:'axis'},legend: {data: ['充值','消费'] },calculable:true,xAxis: [{type:'category',// boundaryGap: false,data:function(){varlist = [];for(vari =10; i
区别以及效果：
在这里我同时给容器添加背景色，在echarts配置中设置背景色，一会我们看看是哪个背景色作用上了，代码如下：
我的博客地址 http://blog.zhouminghang.xyz
很显然，配置里的背景色应用上了，所以直接给容器设置背景是行不通的，效果如图所示：
我的博客地址 http://blog.zhouminghang.xyz
3.2 怎么设置多条折线以及每条折线的颜色
在series中以数组形式添加多组数据即可；
在每条折线里面直接添加color: ['相应的颜色']
代码如下：
我的博客地址 http://blog.zhouminghang.xyz
效果图如下：
我的博客地址 http://blog.zhouminghang.xyz
3.3 去掉小圆点
设置symbol: 'none'
代码对比：
我的博客地址 http://blog.zhouminghang.xyz
效果对比：
我的博客地址 http://blog.zhouminghang.xyz
3.4 设置折线图的弧度
设置smooth属性
属性值在0-1之间
代码对比图：
我的博客地址 http://blog.zhouminghang.xyz
效果对比图：
我的博客地址 http://blog.zhouminghang.xyz
3.5 设置坐标轴的颜色
为了让效果颜色更加明显，就给坐标轴添加比较显眼的颜色，只做个示范用，项目中肯定不会用这么重的颜色，一般使用灰色系的颜色比较淡的
设置X轴颜色为红色
在xAxis下添加
axisLine: {lineStyle: { color:'red'} },
同理设置Y轴
代码：
我的博客地址 http://blog.zhouminghang.xyz
效果图：
我的博客地址 http://blog.zhouminghang.xyz
3.6 怎么让折线图从X轴0刻度开始
设置boundaryGap: false,
代码如下：
我的博客地址 http://blog.zhouminghang.xyz
效果如下：
我的博客地址 http://blog.zhouminghang.xyz
3.7 怎么让X轴的时间这组数据旋转
有时候我们X轴数据比较长又比较多的时候，水平放置肯定成不下，那我们就让它倾斜着放，这样就可以放更多的数据。
好了，废话不多说，看代码：
我的博客地址 http://blog.zhouminghang.xyz
效果如图：
我的博客地址 http://blog.zhouminghang.xyz
四. 突然发现我写的有个小问题，少了一组数据，很尴尬的赶脚
你可以直接在data中添加一组数据
哈哈，我比较懒，就直接修改那个判断条件，将i<=18改成i<18;
完整的代码如下：
// 获取到这个DOM节点，然后初始化varmyChart = echarts.init(document.getElementById("box"));// option 里面的内容基本涵盖你要画的图表的所有内容varoption = {// 定义样式和数据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(){varlist = [];for(vari =10; i
效果如图：
链接：https://www.jianshu.com/p/8cac22daca98
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
