vue eacharts折线图实线加虚线实线区域渐变色添加虚线

最新推荐文章于 2024-04-24 11:19:03 发布

小洁的博客

最新推荐文章于 2024-04-24 11:19:03 发布

阅读量1.8k

点赞数

分类专栏： vue开发文章标签： vue.js

本文链接：https://blog.csdn.net/sun_0516/article/details/106052585

版权

本文介绍了如何在Vue.js项目中使用ECharts创建折线图，重点讲解如何将部分折线设置为实线，另一部分设置为虚线，并实现实线区域的渐变色效果。

摘要由CSDN通过智能技术生成

<div id="myChart"></div>

this.drawLine();

drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                //用formatter回调函数显示多项数据内容  
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params, ticket, callback) {
                        var htmlStr = '';
                        var valMap = {};
                        for (var i = 0; i < params.length; i++) {
                            var param = params[i];
                            var xName = param.name; //x轴的名称  
                            var seriesName = param.seriesName; //图例名称  
                            var value = param.value; //y轴值  
                            var color = param.color; //图例颜色  

                            //过滤无效值
                            if (value == '-') {
                                continue;
                            }
                            //过滤重叠值
                            if (valMap[seriesName] == value) {
                                continue;
                            }
                            // if (i === 0) {
                            //     htmlStr += xName + '<br/>'; //x轴的名称  
                            // }
                            htmlStr +&#