PS相关学习资料链接：Pink老师的教程分解，O(∩_∩)O哈哈~
效果：
html结构:
<div class="pannel trend">
<h2>复杂趋势图</h2>
<div class="chart">
</div>
</div>
css自行设置chart类的宽和高。
js相关逻辑：
//折线图2：复杂趋势图
(function() {
//1找到chart
var myChart = echarts.init(document.querySelector(".trend .chart"));
//2设定配置项
var option = {
tooltip: {
trigger: 'axis',
},
legend: {
right: '3%', //图例组件离容器右侧的距离
textStyle: { //图例文字的样式
color: 'rgba(255, 255, 255, 0.5)'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLabel: {
color: 'rgba(255, 255, 255, 0.5)'
},
axisTick: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: [{
type: 'value',
axisLabel: {
color: 'rgba(255, 255, 255, 0.5)'
},
axisTick: false,
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.1)'
}
}
}],
series: [{
name: '邮件营销',
type: 'line',
smooth: true,
// 单独修改线的样式
lineStyle: {
color: "#0184d5",
width: 3
},
areaStyle: {
// 渐变色，只需要复制即可
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
},
{
offset: 0.8,
color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)" //图形阴影的模糊大小
},
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 设置拐点颜色以及边框
itemStyle: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
smooth: true,
lineStyle: {
normal: {
color: "#00d887",
width: 3
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(0, 216, 135, 0.4)"
},
{
offset: 0.8,
color: "rgba(0, 216, 135, 0.1)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 设置拐点颜色以及边框
itemStyle: {
color: "#00d887",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
//3将配置项option设给chart
myChart.setOption(option);
//4让图表跟随屏幕自适应
window.addEventListener("resize", function() {
myChart.resize();
});
})();