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(); 
})

注意点：

1、数据变化后要重新刷新echarts图标，这个时候需要使用：setOption(option, true); 这里的true就是重载图标的意思

myChart.setOption(option, true);

2、监听窗口变化，重置echarts表格

window.onresize = function () {
   mycharts.resize();
};

最后附上官方配置项文档：https://echarts.apache.org/examples/zh/editor.html?c=line-stack

---

如果觉得这篇文章对你有帮助，欢迎点赞👍、收藏💖、转发✨哦~