之前自学的时候也使用过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;
}()
}
],
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节点,然后初始化
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);
区别以及效果:
在这里我同时给容器添加背景色,在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节点,然后初始化
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);
效果如图:
我的博客地址 http://blog.zhouminghang.xyz
五. 鼠标放在折线上,显示该折点的数据
在 series 中添加 itemStyle : { normal: {label : {show: true}}},
item123.png
效果如下:
数据123.png
注:鼠标不放在上面是不会显示该点数据的。
折点数据 设置背景色
在series中添加样式:
itemStyle : { normal: {
label : {show: true,color:'white',backgroundColor:'black'}
}},
我在echarts 官方demo上加了一下,效果如下:
折点背景1111.png
option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
itemStyle : { normal: {
label : {show: true,color:'white',backgroundColor:'black'}
}},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
}
]
};