echarts多折线按组分类控制显示隐藏

最新推荐文章于 2024-10-11 19:03:40 发布
最新推荐文章于 2024-10-11 19:03:40 发布
阅读量279 收藏 5
点赞数 2
分类专栏： vue-插件 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44278289/article/details/142853986
版权

需求：目前有俩个组数组分别为sss和aaa，sss和aaa有4个属性，分别为温度、湿度、气压和ppm，根据不同的属性每组画出4条折现，结果应该为8条折现，每条折现颜色不一致，名称也不一致，时间也不一致，通过额外设置的按钮去控制每组的显示和隐藏

1.效果

2.主要代码和讲解

数据源格式如下：

        weatherData: [
                {
                    poi_code: 'sss',
                    time: '2024-10-01 14:14:14',
                    period_num: 230,
                    airpressure: 1020.3,
                    temperature: 30,
                    humidity: 29,
                    ppm: 7.13
                }
            ],

2.1 封装一个折线图

折线图上的数据示例我都有标注，只需要传一样的数据就可以实现了

<template>
    <!-- 折线图 -->
    <div :id="id" class="main" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: ['sendOption', 'id'],
    mounted() {
        window.setTimeout(() => {
            this.play_echarts();
        }, 1000);
    },
    watch: {
        sendOption: {
            deep: true,
            handler() {
                this.play_echarts();
            }
        }
    },
    data() {
        return {
            myChart: null
        };
    },
    methods: {
        play_echarts() {
            let that = this;
            that.$nextTick((_) => {
                if (
                    //判断是否存在echarts实例化对象,如果存在则销毁
                    that.myChart != null &&
                    that.myChart != '' &&
                    that.myChart != undefined
                ) {
                    that.myChart.dispose();
                }
                // const pointName = that.sendOption.pointName;
                // const imei = that.sendOption.imei;
                // console.log(pointName, imei, "获取到的数据");
                let option = {
                    title: {
                        text: that.sendOption.title,
                        x: '20',
                        y: '-3', //"20",
                        textStyle: {
                            color: '#000',
                            fontFamily: 'Microsoft YaHei',
                            fontSize: '16'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        confine: true //限制tooltip在图表范围内展示
                    },
                    legend: {
                        data: that.sendOption.legend,
                        selected: that.sendOption.legendSelected[0]
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '6%',
                        top: '13%',
                        containLabel: true
                    },
                    toolbox: {
                        right: '10%',
                        // 自定义工具提示框
                        tooltip: {
                            show: true,
                            trigger: 'axis',
                            formatter: function (param) {
                                return '<div>' + param.title + '</div>';
                            }
                        },
                        // 隐藏工具标题
                        showTitle: false,
                        feature: {
                            // 保持图片
                            saveAsImage: {
                                type: 'png',
                                name: that.sendOption.title, //保存文件的名称
                                excludeComponents: ['toolbox'],
                                title: '下载为图片',
                                icon: 'path://M136.533333 0h750.933334c75.093333 0 136.533333 61.44 136.533333 136.533333v750.933334c0 75.093333-61.44 136.533333-136.533333 136.533333H136.533333c-75.093333 0-136.533333-61.44-136.533333-136.533333V136.533333C0 61.44 61.44 0 136.533333 0z m580.266667 409.6c54.613333 0 102.4-47.786667 102.4-102.4S771.413333 204.8 716.8 204.8 614.4 252.586667 614.4 307.2 662.186667 409.6 716.8 409.6z m-273.066667 266.24l-68.266666-109.226667c0-6.826667-6.826667-6.826667-13.653334-13.653333-20.48-6.826667-40.96-6.826667-47.786666 13.653333l-177.493334 273.066667v13.653333c0 20.48 13.653333 34.133333 34.133334 34.133334h696.32c13.653333 0 27.306667-13.653333 27.306666-27.306667 0-6.826667 0-13.653333-6.826666-13.653333l-150.186667-211.626667c-6.826667-13.653333-27.306667-13.653333-40.96-6.826667l-6.826667 6.826667-13.653333 13.653333-95.573333 150.186667c-13.653333 13.653333-34.133333 20.48-47.786667 6.826667-6.826667 0-6.826667-6.826667-6.826667-13.653334L443.733333 675.84z',
                                iconStyle: {
                                    color: '#409eff',
                                    borderColor: 'none'
                                }
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: that.sendOption.xAxis
                        // data: ['11-05 10:20:00', '11-05 10:21:00', '11-05 10:22:00']//示例代码
                    },
                    yAxis: {
                        type: 'value',
                        // min: yMin < 0 ? null : yMin,
                        // max: yMax,
                        // boundaryGap: true,
                        boundaryGap: [0.1, 1]
                        // max: function (value) {
                        //   if (value.max < 3) {
                        //     value.max = 3;
                        //   } else {
                        //     value.max = value.max;
                        //   }
                        //   return value.max;
                        // },
                        // boundaryGap: ["60%", "80%"],
                        // maxInterval: 30,
                    },
                    series: that.sendOption.seriesData
                    // 示例如下
                    // series: [
                    //     {
                    //         data: [
                    //             ['11-05 10:20:00', 14.06],
                    //             ['11-05 10:22:00', null]
                    //         ],
                    //         type: 'line',
                    //         name: 'sss',
                    //         smooth: true,
                    //         symbolSize: 6
                    //     },
                    //     {
                    //         data: [['11-05 10:21:00', 21.82]],
                    //         type: 'line',
                    //         name: 'aaa',
                    //         smooth: true,
                    //         symbolSize: 6
                    //     },
                    // ]
                };
                // 基于准备好的dom，初始化echarts实例
                that.myChart = echarts.init(document.querySelector(`#${that.id}`));
                window.addEventListener('resize', function () {
                    if (that.myChart) {
                        that.myChart.resize();
                    }
                });
                // 使用刚指定的配置项和数据显示图表。
                that.myChart.setOption(option);
            });
        },
        redraw() {
            // 使用刚指定的配置项和数据显示图表。
            that.myChart.setOption(option);
        }
    },
    beforeDestroy() {
        let that = this;
        if (!that.myChart) {
            return;
        }
        that.myChart.dispose();
        that.myChart = null;
    }
};
</script>

<style lang="scss" scoped>

</style>

 2.2 数据转换成折线图需要的数据

折线图封装完后引入页面需要传如下数据给折线图

            sendOptionTop: {
                title: '', //y轴标题
                seriesData: [], //主要数据
                xAxis: [], //点名称
                legend: [], //标题
                showTooltipLevel: true, //显示预警等级
                legendSelected: [] //控制显示隐藏
            },

 数据处理：把原始数据首先转换为分组的键值对

   // 根据poi_code对数据进行分组
            let groupedData = {};
            this.weatherData.forEach((item) => {
                // 判断当前poi_code是否存在groupedData中，以下是不存在的情况
                if (!groupedData[item.poi_code]) {
                    // 不存在则创建一个新的键值对
                    groupedData[item.poi_code] = {
                        times: [],
                        temperatures: [],
                        humidities: [],
                        airpressures: [],
                        ppms: []
                    };
                }
                groupedData[item.poi_code].times.push(item.time);
                groupedData[item.poi_code].temperatures.push([item.time || null, item.temperature || null]); // 处理null值
                groupedData[item.poi_code].humidities.push([item.time || null, item.humidity || null]);
                groupedData[item.poi_code].airpressures.push([item.time || null, item.airpressure || null]);
                groupedData[item.poi_code].ppms.push([item.time || null, item.ppm || null]);
            });
            console.log(groupedData, '组的数据-------');

转换后的效果如下， 一个组sss分别有4个单独的数据

 

 之后把键值对转换为数组，并且把sss添加到对应的值

        let echartsData = [];
            for (let code in groupedData) {
                echartsData.push({
                    name: code,
                    time: groupedData[code].times,
                    temperature: groupedData[code].temperatures,
                    humidity: groupedData[code].humidities,
                    airpressure: groupedData[code].airpressures,
                    ppm: groupedData[code].ppms
                });
            }
            console.log(echartsData, '');

 

 

 最后根据属性名进行匹配数据源，最终得到8条折现的数据

   let series = [];

            // 动态设置xAxis的data和series
            echartsData.forEach((data) => {
                // option.xAxis.data = data.time; // 设置x轴的时间数据（注意：这里可能需要根据实际情况调整，因为所有组的时间可能不一致）

                // 为每个poi_code创建一个series
                ['temperature', 'humidity', 'airpressure', 'ppm'].forEach((type) => {
                    series.push({
                        name: `${data.name} ${
                            type == 'temperature' ? '温度' : type == 'humidity' ? '湿度' : type == 'airpressure' ? '气压' : type
                        }`,
                        type: 'line',
                        smooth: true,
                        symbolSize: 6,
                        data: data[type]
                    });
                });
            });

注意这个name，name的值要在legend中

2.3按钮控制

按钮代码如下，只需要把title换成sss和aaa就行

  <div
                class="item"
                v-for="(item, index) in lineChartArr"
                :key="index"
                :class="{ isSelected: item.isSelect }"
                @click="handleLineFilter(item)"
            >
                <div
                    class="item-chunk"
                    :style="{
                        background: `${!item.isSelect ? item.color : '#e4e5e6'}`
                    }"
                ></div>
                <div class="item-title">{{ item.title }}</div>
            </div>

 点击按钮后和legend标签进行匹配，匹配成功就设置legendSelected，注意！不能直接改变legendSelected，不然没有响应只能通过一个变量selected来进行改变了

   handleLineFilter(code) {
            code.isSelect = !code.isSelect;
            this.sendOptionTop.legendSelected = [];
            let legendData = this.sendOptionTop.legend;
            for (let item of legendData) {
                // 检查当前元素是否包含 obj.title
                if (code.isSelect && item.indexOf(code.title) > -1) {
                    // 如果包含，则添加到 result 对象中，并设置值为 false
                    this.selected[item] = false;
                } else if (item.indexOf(code.title) > -1) {
                    this.selected[item] = true;
                }
            }
            this.lineChartArr.forEach((item) => {
                if (item.title === code.title) {
                    item.isSelect = code.isSelect;
                }
            });
            this.sendOptionTop.legendSelected.push(this.selected);
        }

匹配成功后的数据 ，这样就能让sss的组数据不选中了

 

3.完整代码

<template>
    <div class="box">
        <div class="top-item">
            <div
                class="item"
                v-for="(item, index) in lineChartArr"
                :key="index"
                :class="{ isSelected: item.isSelect }"
                @click="handleLineFilter(item)"
            >
                <div
                    class="item-chunk"
                    :style="{
                        background: `${!item.isSelect ? item.color : '#e4e5e6'}`
                    }"
                ></div>
                <div class="item-title">{{ item.title }}</div>
            </div>
        </div>

        <MultipleLineCharts id="zhexian02" :sendOption="sendOptionTop" />
    </div>
</template>

<script>
import MultipleLineCharts from '@/components/multipleLineCharts';
export default {
    components: {
        MultipleLineCharts
    },
    data() {
        return {
            lineChartArr: [
                {
                    color: '#8b8c8c', //'#DC143C',
                    title: 'sss',
                    isSelect: false
                },
                {
                    color: '#8b8c8c', //'#000000',
                    title: 'aa',
                    isSelect: false
                }
            ],
            weatherData: [
                {
                    poi_code: 'sss',
                    time: '2024-10-01 14:14:14',
                    period_num: 230,
                    airpressure: 1020.3,
                    temperature: 30,
                    humidity: 29,
                    ppm: 7.13
                },
                {
                    poi_code: 'sss',
                    time: '2024-10-02 13:14:14',
                    period_num: 527,
                    airpressure: null,
                    temperature: 1020.3,
                    humidity: 64,
                    ppm: 170
                },
                {
                    poi_code: 'sss',
                    time: '2024-10-03 14:14:14',
                    period_num: 528,
                    airpressure: null,
                    temperature: 756.3,
                    humidity: 65,
                    ppm: 53
                },
                {
                    poi_code: 'sss',
                    time: '2024-10-04 14:14:14',
                    period_num: 529,
                    airpressure: 54,
                    temperature: 1020.3,
                    humidity: null,
                    ppm: 0
                },
                {
                    poi_code: 'aaa',
                    time: '2024-10-02 13:14:14',
                    period_num: 527,
                    airpressure: 32,
                    temperature: 55,
                    humidity: null,
                    ppm: 0
                },
                {
                    poi_code: 'aaa',
                    time: '2024-10-05 11:14:14',
                    period_num: 122,
                    airpressure: 12,
                    temperature: 73,
                    humidity: 836,
                    ppm: 0
                },
                {
                    poi_code: 'aaa',
                    time: '2024-10-06 11:14:14',
                    period_num: 529,
                    airpressure: 1,
                    temperature: 23,
                    humidity: 55,
                    ppm: 1
                },
                {
                    poi_code: 'aaa',
                    time: '2024-10-07 06:14:14',
                    period_num: 530,
                    airpressure: 13,
                    temperature: 0,
                    humidity: 35,
                    ppm: 0
                },
                {
                    poi_code: 'aaa',
                    time: '2024-10-07 16:14:14',
                    period_num: 531,
                    airpressure: 33,
                    temperature: 32,
                    humidity: 62,
                    ppm: 0
                }
            ],
            sendOptionTop: {
                title: '', //y轴标题
                seriesData: [], //主要数据
                xAxis: [], //点名称
                legend: [], //标题
                showTooltipLevel: true, //显示预警等级
                legendSelected: [] //控制显示隐藏
            },
            selected: {}
        };
    },
    mounted() {
        this.queryWeather();
    },
    methods: {
        queryWeather() {
            // 根据poi_code对数据进行分组
            let groupedData = {};
            this.weatherData.forEach((item) => {
                // 判断当前poi_code是否存在groupedData中，以下是不存在的情况
                if (!groupedData[item.poi_code]) {
                    // 不存在则创建一个新的键值对
                    groupedData[item.poi_code] = {
                        times: [],
                        temperatures: [],
                        humidities: [],
                        airpressures: [],
                        ppms: []
                    };
                }
                groupedData[item.poi_code].times.push(item.time);
                groupedData[item.poi_code].temperatures.push([item.time || null, item.temperature || null]); // 处理null值
                groupedData[item.poi_code].humidities.push([item.time || null, item.humidity || null]);
                groupedData[item.poi_code].airpressures.push([item.time || null, item.airpressure || null]);
                groupedData[item.poi_code].ppms.push([item.time || null, item.ppm || null]);
            });
            console.log(groupedData, '组的数据-------');
            let echartsData = [];
            for (let code in groupedData) {
                echartsData.push({
                    name: code,
                    time: groupedData[code].times,
                    temperature: groupedData[code].temperatures,
                    humidity: groupedData[code].humidities,
                    airpressure: groupedData[code].airpressures,
                    ppm: groupedData[code].ppms
                });
            }
            console.log(echartsData, '');
            let series = [];

            // 动态设置xAxis的data和series
            echartsData.forEach((data) => {
                // option.xAxis.data = data.time; // 设置x轴的时间数据（注意：这里可能需要根据实际情况调整，因为所有组的时间可能不一致）

                // 为每个poi_code创建一个series
                ['temperature', 'humidity', 'airpressure', 'ppm'].forEach((type) => {
                    series.push({
                        name: `${data.name} ${
                            type == 'temperature' ? '温度' : type == 'humidity' ? '湿度' : type == 'airpressure' ? '气压' : type
                        }`,
                        type: 'line',
                        smooth: true,
                        symbolSize: 6,
                        data: data[type]
                    });
                });
            });
            console.log(series, 'series');

            let aa = this.weatherData.map((item) => item.time);
            this.sendOptionTop.xAxis = this.removeDuplicateDates(aa);
            this.sendOptionTop.seriesData = series;
            this.sendOptionTop.legend = this.sendOptionTop.seriesData.map((item) => item.name);
        },
        removeDuplicateDates(dates) {
            // 使用 Set 来自动去除重复项
            const uniqueDates = new Set(dates);
            // 将 Set 转换回 Array
            return Array.from(uniqueDates);
        },
        handleLineFilter(code) {
            code.isSelect = !code.isSelect;
            this.sendOptionTop.legendSelected = [];
            let legendData = this.sendOptionTop.legend;
            for (let item of legendData) {
                // 检查当前元素是否包含 obj.title
                if (code.isSelect && item.indexOf(code.title) > -1) {
                    // 如果包含，则添加到 result 对象中，并设置值为 false
                    this.selected[item] = false;
                } else if (item.indexOf(code.title) > -1) {
                    this.selected[item] = true;
                }
            }
            this.lineChartArr.forEach((item) => {
                if (item.title === code.title) {
                    item.isSelect = code.isSelect;
                }
            });
            console.log(this.sendOptionTop.legendSelected);
            this.sendOptionTop.legendSelected.push(this.selected);
        }
    }
};
</script>

<style lang="scss" scoped>
.box {
    height: 600px;
    width: 50%;
}
.top-item {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 40px 0px 20px;
    .item {
        display: flex;
        margin: 0 10px;
    }
}
.item-chunk {
    height: 13px;
    width: 26px;
    margin-top: 3px;
    margin-right: 5px;
}
</style>

文章到此结束，希望对你有所帮助~

请叫我欧皇i
关注
专栏目录
echarts 折线图详细配置
一起学习一起进步~
09-25 219
折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。（以下设置全部生效最优版本为：5.4.0或以上）
echarts基本属性大全
weixin_46518533的博客
07-06 9815
echarts基本属性大全 // 全图默认背景  //backgroundColor:"#fff000",        //设置背景颜色,注意是逗号 backgroundColor:“rgba(0,0,0,0.1)”,  // 第四个参数是设置透明度 // 图表标题 title: {  text:“图表标题”,  // 标题内容     x: ‘left’,        // 水平安放位置，默认为左对齐，可选为：                       // ‘center’ ¦ ‘left’ ¦ 
echarts+vue2实战(一)
qq_44930306的博客
06-21 1303
实际项目中的花哨样式和动画效果的echarts，数据是用node模拟后端接口得来的
可视化实时监控系统echarts图
qq_48018288的博客
09-27 1482
可视化实时监控系统echarts图
Echarts配置项手册mini
sd6022的博客
12-18 4734
这里写自定义目录标题前端SPA single page application新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 前端SPA single page application 链接 单页面应用 单页Web应用（
Vue使用Echarts图表
李木子的博客
04-24 356
【代码】Vue使用Echarts图表。
echarts 各个配置项详细说明总结
weixin_43790703的博客
01-30 371
每个系列通过 type 决定自己的图表类型： type: 'bar'：柱状/条形图 type: 'line'：折线/面积图 type: 'pie'：饼图 type: 'scatter'：散点（气泡）图 type: 'effectScatter'：带有涟漪特效动画的散点（气泡） type: 'radar'：雷达图 type: 'tree'：树型图 type: 'treemap'：树型图 type: 'sunburst'：旭日图
echarts属性大全
weixin_42612569的博客
03-18 2575
全图默认背景 //backgroundColor:"#fff000",        //设置背景颜色,注意是逗号 backgroundColor:“rgba(0,0,0,0.1)”,  // 第四个参数是设置透明度 图表标题 title: {  text:“图表标题”,  // 标题内容     x: ‘left’,        // 水平安放位置，默认为左对齐，可选为：                       // ‘center’ ¦ ‘left’ ¦ ‘right’              
Echarts 配置、用法及注意事项
海胆的博客
12-17 1571
如果一个 transform 被链式声明，它只能获取前一个 transform 的第一个输出作为输入（第一个 transform 除外），以及它只能把自己的第一个输出给到后一个 transform （最后一个 transform 除外）为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。同理，若取行作为维度时，第一列数据会作为图例名。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
ECharts数据可视化学习笔记（温故而知新）
qq_64510496的博客
07-14 198
ECharts是一个使用JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
echarts表项目数据可视化
博客
09-14 4191
echarts大数据可视化技术点功能点后台搭建结合vue开发图表组件websocket实现数据推送主题切换\页面合并\全屏切换 技术点 vue vuex router webpack 功能点 后台搭建 结合vue开发图表组件 websocket实现数据推送 主题切换\页面合并\全屏切换 ...
echarts详细说明
pyy的博客
09-17 3330
https://www.iteye.com/blog/elang0705-2252577 简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，...
基于Handsontable.js + Excel.js实现表格预览和导出功能(公式渲染)
bigpatten的博客
10-11 506
二、编写页面布局 三、编写预览核心代码 如下图所示:通过以上代码，我们成功将Excel文件中的数据、样式、合并单元格等信息加载到了Handsontable中，并渲染到了页面上。所以我们需要对公式进行处理，将公式替换为对应的值。请看以下处理公式的方法。 由图可以看到带有公式的单元格是一个对象，这就是带有公式的单元格渲染后是"[object Object]"的原因。解决方法就是将带有公式的单元格替换为对应的值，请看以下代码: 通过处理后，带有公示的单元格不在渲染为"[object Object]“，但是会渲
【笔记】Day2.3.1DTO对象
最新发布
2301_81538937的博客
10-11 101
当前端传来的数据中包含后端数据库没有的字段时，DTO 可以对这些数据进行转换和映射，以确保后端可以正常接收并处理这些数据。就传到（经过）DTO DTO对前端数据进行转换，使得后端数据库得以正常接收前端传回的数据。当前端传回的数据中含有后端数据库没有的字段时。DTO是一个联系前端数据和后端数据库的桥梁。一个默认前提：前端传回数据到数据库。存着后端数据库中没有的实体字段。
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1343
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
前端的全栈混合之路Meteor篇（四）：支持自定义对象序列化的EJSON介绍
分享有趣的、贴近生活的CS知识
10-07 889
在Meteor框架中，EJSON（Extended JSON）是一个扩展了标准JSON的库，旨在支持更多的数据类型。标准JSON仅支持字符串、数字、布尔值、数组和对象等基本数据类型，而EJSON允许开发者在Meteor应用中传输更复杂的数据类型，例如DateBinary数据，甚至是自定义对象，这使得Meteor在客户端和服务器之间传递复杂数据变得更加便捷和高效。
Vue根实例、实例总结
m0_54007573的博客
10-04 698
Vue根实例、实例总结
前后分离项目记录
qq_25806839的博客
10-10 201
打包报错 Thread Loader时，增加以下代码： 上线，打包prod时:
echarts折线图显示隐藏
11-05
在echarts折线图中，可以通过设置showSymbol属性来控制是否显示圆点。当showSymbol为false时，圆点将不会显示。同时，可以通过添加trigger: 'axis'来实现鼠标上移时显示圆点的效果。具体代码如下： ``` option: { tooltip: { show: true, trigger: 'axis', formatter: '{b0}: {c0}<br />{b1}: {c1}' }, xAxis: { show: false, type: 'category', data: [] }, yAxis: { show: false, type: 'value' }, series: [{ data: [], type: 'line', smooth: true, showSymbol: false, areaStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(58,77,233,0.8)' }, { offset: 1, color: 'rgba(58,77,233,0.3)' }]) } }] } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值