echarts动态折线堆积图
效果如下：
这里用的是echarts的折线图堆叠
本文要讨论的内容：
1、折线堆叠样式
2、动态更改数据
3、图表挂载
1、折线堆叠样式
const lineChart = () => {
let option = {
color : ['#00f2f1','#ed3f35'], /* 调色盘 */
/* 标题的样式 */
title: {
text: '单位：万', /* 右上角标题 */
textStyle : { /* 标题的样式 */
fontSize : '12px',
color : '#61a8ff',
fontStyle : 'normal',
fontWeight : 'normal'
},
left:'40px', // 标题位置
},
/* 鼠标移入的悬浮框配置 */
tooltip: {
trigger: 'axis',
backgroundColor : 'rgba(0,0,0,0.4)', /* 背景色 */
borderColor: 'transparent', // 边框色
textStyle: { // 文字颜色
color : 'rgba(255,255,255,0.8)'
},
axisPointer:{ //坐标轴指示器
type:'cross', //十字准星指示器
// x轴的线条
crossStyle: {
color: "rgba(76, 155, 253)", //线的颜色
width: 1, // 宽度
type: "dashed", // 虚线
},
// y轴的线条
lineStyle:{
color : 'rgba(76, 155, 253)'
},
// x和y轴指向的数据提示样式
label : {
show : true,
color : '#fff', // 文字颜色
backgroundColor : '#4c9bfd' // 背景颜色
}
}
},
/* 分类说明 */
legend: {
data: ['预期销售额', '实际销售额'], /* 顶部分类 */
textStyle:{
color : '#4c9bfd' // 右上角字体颜色
},
lineStyle : {
color : 'inherit' /* 标题分类数据的的颜色-根据调色盘的样式自动遍历选择 */
},
},
grid: {
left: '4%', // 定位
right: '4%',
bottom: '0%',
height : 'auto', // 高度自适应
top : '30px', // 距离顶部
show : true, // 展示并允许修改样式
containLabel: true, // 包括刻度文字在内
borderColor: '#096b80' /* 边框的颜色 */
},
/* 工具栏配置 */
toolbox: {
/* 保存按钮 */
feature: {
saveAsImage: { /* 保存为图片 */
iconStyle : { /* icon图标的样式 */
borderColor: '#61a8ff'
},
bottom : '10px' // 位置
}
},
top:'-5px', // 工具栏位置
right:'10px' // 工具栏位置
},
/* x y 轴的文字样式 */
textStyle:{
color: '#4c9bfd'
},
// 轴下方指向的颜色
axisTick: {
lineStyle : { color : '#096b80' }
},
xAxis: {
type: 'category',
boundaryGap: false, //去除轴内间距
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月'] // x轴下方的月份数据
},
yAxis: {
type: 'value',
splitLine : { // y轴折线图分割线配置
show : true,
lineStyle : {
color : '#096b80'
}
},
},
series: [
/* 折线图-折线的配置 */
{
name: '预期销售额', // 对应legend分类
type: 'line', // 类型为线条
data: expect,
// 平滑折线
smooth: false,
// symbol:'none', // 去掉连接点
},
{
name: '实际销售额', // 对应legend分类
type: 'line', // 类型为线条
data: practical,
// 平滑折线
smooth: false,
}
]
};
myChart.setOption(option);
}
2、动态更改数据
我们只需要去操作series绑定的数据即可
series: [
/* 折线图-折线的配置 */
{
name: '预期销售额', // 对应legend分类
type: 'line', // 类型为线条
data: expect,
// 平滑折线
smooth: false,
// symbol:'none', // 去掉连接点
},
{
name: '实际销售额', // 对应legend分类
type: 'line', // 类型为线条
data: practical,
// 平滑折线
smooth: false,
}
]
我们可以模拟一个随机数，调用该函数随机生成数据并替换掉series原有的数据，这样就可以实现动态数据。
/* 随机生成并重置数据 */
const randomInfo = (num) => {
expect.length = 0;
practical.length = 0;
stackedInfo.forEach(el=>{
el.expect = (Math.random() * num).toFixed(0);
el.practical = (Math.random() * num).toFixed(0);
expect.push(el.expect)
practical.push(el.practical)
})
lineChart(); // 重新设置图表
};
我们更改了echarts的数据源，页面视图并不会发生变化，因为图表没有重新设置，仅仅数据变了，echarts没有重新设置是没有用的，所以我们需要封装设置图表的方法，数据变化后调用方法重新设置图表。
3、图表挂载
vue3可以使用setup，由于setup替代了beforeCreate和created声明周期，所以这个阶段是无法初始化echarts的，因为dom此时还获取不到，我们可以将数据写在组合API上面，实际初始化echarts在onMounted中即可。
const expect = reactive([]); // 预期销售数据
const practical = reactive([]); // 实际销售数据
const stacked = ref(); // dom
let myChart = null; // echarts
onMounted(()=>{
myChart = echarts.init(stacked.value); // 初始化echarts
lineChart();
})
最后附上官方配置项文档：https://echarts.apache.org/examples/zh/editor.html?c=line-stack
如果觉得这篇文章对你有帮助，欢迎点赞👍、收藏💖、转发✨哦~
