echarts使用之折线图
-
公司数据可视化项目需要大量的用到echarts图表，今天总结下折线图的使用。
参照echarts官方文档，三步走： -
1、引入echarts ：import echarts from “echarts”;
-
2、准备一个盒子
-
3、初始化echarts模型
下面是完整的代码
<template>
<div class="analysis-line">
<div class="chart" ref="chart"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "LineChart",
// props:["lineData"],
data() {
return {
checkedIndex:2,
ordinate:["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
lineData: [],
legendData:['监测事件', '监测报警', '监测违章'],
chart: "",
seriesLine:[
{
name: "监测事件",
data: [220, 232, 201, 234, 290, 230, 220],
type: "line",
},
{
name: "监测报警",
data: [120, 200, 150, 80, 70, 110, 130],
type: "line",
},
{
name: "监测违章",
data: [119, 250, 150, 90, 90, 110, 130],
type: "line",
}
]
};
},
mounted() {
this.initEchart();
},
methods: {
initEchart() {
let _this = this;
this.chart = echarts.init(this.$refs.chart, null, {
render: "svg"// 使用SVG,避免页面缩放造成的模糊
});
let lineOption = {
tooltip: {
trigger: 'axis',
},
grid:{
left: '3%',
right: '4%',
bottom: '5%',
containLabel: true,
show:false,
},
legend: {
data: _this.legendData,
left: 'left',
top: 'top',
padding:5,
icon: "rect",//设置形状
itemWidth: 15, // 设置宽度
itemHeight: 4, // 设置高度
itemGap: 20, // 设置间距
textStyle: {
//文字样式
color: "rgba(255, 255, 255, 0.6)",
fontSize: "12"
}
},
//seriesLine中一个对象代表一条折线，会自动循环color数组，每条折线显示不同的颜色
color: [
"#91C8E0",
"#B0D586",
"#69C1C2",
"#D9A175",
"#419BCC",
"#B1D5E0",
"#539AF1",
"#49B4E3",
"#71C075",
"#EECC5D",
],
xAxis: {
type: "category",//category代表数据不是连续的
data: _this.ordinate,
axisLine:{
lineStyle:{
color:'rgba(255, 255, 255, 0.6)',
}
}
},
yAxis: {
type: "value",
splitLine:{
show:false//不显示坐标分割线
},
axisLine:{
lineStyle:{
color:'rgba(255, 255, 255, 0.6)',
}
}
},
series:_this.seriesLine
};
this.chart.setOption(lineOption);
// canvas 自适应,根据窗口的变化去变化canvas的宽度
window.addEventListener("resize", function() {
_this.chart.resize();
});
},
}
};
</script>
<style lang="less">
.analysis-line{
width: 100%;
height: 100%;
.chart{
height: 100%;
}
}
</style>
这个只是我写的静态页面，后端数据来了后就data中的seriesLine替换成真实的数据。echarts的很多属性的配置不需要记忆，用的时候去找相应的官方案例，根据需求去找相关配置项。