echarts 折线上写数值,echarts之折线图配置

之前自学的时候也使用过echarts来制作柱状图，折线图，地图，现在想想那时候做的简直是太LOW了，就是简单的在官网上，模仿人家的示例代码，改改数据，就可以了，原生态的，样子果然是很丑。

在我们的项目中，我们自己封装了echarts指令，只用自己定义一下样式，然后调用数据接口，就可以了，这里先不多说封装指令了，现在先说说怎么调整样式

我自己写的一个代码为例，以折线图为例

一 . 问题汇总： 折线图问题与解决

折线图中的多条折线，怎么设置？

怎么设置echarts的背景颜色？

怎么设置X轴，Y轴的坐标线的颜色？

怎么将X轴的数据倾斜显示？

怎么让你的折线有弧度？

初始样式如图，以及要解决的问题：

我的博客地址 http://blog.zhouminghang.xyz

二. 前提准备条件

要使用echarts，首先要在你的页面中引入echarts.js；

要在.html文件中，设置一个容器，并给它设置宽高属性；

再次声明，必须给容器设置宽高，它是用来给画布提供一个空间，否则是不会显示的；

最后就是关于echarts的配置；

可以单独写一个js文件，然后引进来；

也可以直接在index.html中写一个

index.html文件代码如下：

我这里图方便，js就直接写在html文件里了

// 获取到这个DOM节点，然后初始化

var myChart = echarts.init(document.getElementById("box"));

// option 里面的内容基本涵盖你要画的图表的所有内容

var option = {

// 定义样式和数据

}

// 一定不要忘了这个，具体是干啥的我忘了，官网是这样写的使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

注意：

你在写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;

}()