echarts-折线图（折线虚实/颜色与拐点样式修改）

89 阅读 0 评论 59 点赞

我是靠谱客的博主精明毛衣，这篇文章主要介绍echarts-折线图（折线虚实/颜色与拐点样式修改），现在分享给大家，希望可以做个参考。

复制代码

效果图如下图所示
1.绘制一个图表时，需要有一个给定宽高的容器；基本配置可以阅读echarts的文档；里面有很多示例demo~~
html 结构：
 <div id="box"></div>
css样式：

复制代码

1
2
3
4
5
6
7
<style>
	#box{
	width: 600px;
height: 400px;
border: 1px solid #e4e4e4;
}
</style>

js:

1. 首先需要引入echarts.js 的文件；可从echarts官网中按需要进行下载，链接：http://echarts.baidu.com/download.html

2. 如下为js代码；可以根据注释来理解；

其中有几个点也是通过查阅文档与百度所得吐舌头，仅此记录，方便以后查阅与完善。

（1）. 设置折线的虚实，不同折线的颜色设定；

（2）. 对折线的拐点样式进行修改设置（拐点大小；拐点背景颜色）；达到所求；

（3）. 坐标轴的样式（颜色，旋转-适用于内容较多时的完整显示，例如时间）。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<script>
// 获取到这个DOM节点，然后初始化
var myChart = echarts.init(document.getElementById("box"));
var option = {
// 标题
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
//图例名
legend: {
data:['邮件营销','邮件营销1','视频广告','视频广告1']
},
grid: {
left: '3%',
//图表距边框的距离
right: '4%',
bottom: '3%',
containLabel: true
},
//工具框，可以选择
toolbox: {
feature: {
saveAsImage: {}
}
},
//x轴信息样式
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日'],
//坐标轴颜色
axisLine:{
lineStyle:{
color:'red'
}
},
//x轴文字旋转
axisLabel:{
rotate:30,
interval:0
},
},
yAxis: {
type: 'value'
},
series: [
//虚线
{
name:'邮件营销',
type:'line',
symbolSize:8,
//拐点圆的大小
color:['red'],
//折线条的颜色
data:[800, 300, 500, 800, 300, 600,500],
smooth:false,
//关键点，为true是不支持虚线的，实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted'
//'dotted'虚线 'solid'实线
}
}
},
},
//实线
{
name:'邮件营销1',
type:'line',
symbol:'circle',
symbolSize:8,
itemStyle:{
normal:{
color:'red',
borderColor:'red',
//拐点边框颜色
}
},
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
symbolSize:8,
color:['orange'],
smooth:false,
//关键点，为true是不支持虚线的，实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted'
//'dotted'虚线 'solid'实线
}
}
},
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'视频广告1',
type:'line',
stack: '总量',
color:['orange'],
symbol:'circle',
symbolSize:8,
data:[320, 332, 301, 334, 390, 330, 320],
itemStyle:{
normal:{
color:'orange',
borderColor:'orange',
}
},
},
]
};
myChart.setOption(option);
</script>