echarts图表

已于 2023-11-22 11:08:01 修改
阅读量47 收藏
点赞数
文章标签： echarts 前端 javascript
于 2023-10-16 10:49:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/polarisya/article/details/133162328
版权
文章详细描述了如何使用ECharts创建堆叠曲线图，调整饼图label显示，配置地图路线，处理resize失效问题，以及实例的清空和销毁方法，还涉及了主题样式设置和环形轮播效果实现。
摘要由CSDN通过智能技术生成

一、堆叠曲线图

 initChart1() {
      let data1 = [];
      let data2 = [];
      let data3 = [];
      let data4 = [];
      let data5 = [];
      for (let i = 1; i <= 96; i++) {
        data4.push(this.getRandomNumber(90, 100))
        data3.push(this.getRandomNumber(100, 120))
        data2.push(this.getRandomNumber(120, 140))
        data1.push(this.getRandomNumber(140, 160))
        data5.push(this.getRandomNumber(120, 120))
      }
      let myChart = echarts.init(document.getElementById("chart1"));
      window.onresize = myChart.resize;
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          left: '3%',
          right: '5%',
          bottom: "6%",
          top: '15%'
        },
        legend: {
          data: ['曲线1', '曲线2', '曲线3', '曲线4'],
          top: '3%'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ["00:15", "00:30", "00:45", "01:00", "01:15", "01:30", "01:45", "02:00", "02:15", "02:30", "02:45",
              "03:00", "03:15", "03:30", "03:45", "04:00", "04:15", "04:30", "04:45", "05:00", "05:15", "05:30", "05:45",
              "06:00", "06:15", "06:30", "06:45", "07:00", "07:15", "07:30", "07:45", "08:00", "08:15", "08:30", "08:45",
              "09:00", "09:15", "09:30", "09:45", "10:00", "10:15", "10:30", "10:45", "11:00", "11:15", "11:30", "11:45",
              "12:00", "12:15", "12:30", "12:45", "13:00", "13:15", "13:30", "13:45", "14:00", "14:15", "14:30", "14:45",
              "15:00", "15:15", "15:30", "15:45", "16:00", "16:15", "16:30", "16:45", "17:00", "17:15", "17:30", "17:45",
              "18:00", "18:15", "18:30", "18:45", "19:00", "19:15", "19:30", "19:45", "20:00", "20:15", "20:30", "20:45",
              "21:00", "21:15", "21:30", "21:45", "22:00", "22:15", "22:30", "22:45", "23:00", "23:15", "23:30", "23:45", "24:00"
            ],
            axisLine: {
              lineStyle: {
                color: '#cecece'
              }
            },
            axisLabel: {
              color: '#666'
            },
            axisTick: {
              show: false
            },
            axisPointer: {
              snap: true
            }
          }
        ],
        yAxis: [

          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#cecece'
              }
            },
            axisLabel: {
              color: '#666'
            },
            splitLine: {
              show: false
            },
            axisPointer: {
              snap: true
            }
          }
        ],
        series: [

          {
            name: '曲线1',
            type: 'line',
            data: data1,
            smooth: true,
            symbol: 'circle',
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 0
              }
            },
            // markPoint: {
            //   data: [
            //     {
            //       name: '最高',
            //       value: 480,
            //       xAxis: 3,
            //       yAxis: 480,
            //       symbolSize: 40
            //     }
            //   ]
            // },
            itemStyle: {
              // color: '#5171fd',
              color: '#789BFE',
              borderColor: '#fff'
            },
            areaStyle: {
              normal: {
                shadowColor: 'rgba(133,203,247,0.75)',
                shadowBlur: 15
              }
            },
            markLine: {
              symbol: ['none', 'none'],
              data: [
                {
                  name: '阈值',
                  yAxis: 110,
                  lineStyle: { type: 'dashed', color: '#317ECB', width: 1 } // 样式： 线型、颜色、线宽
                },



              ]
            }
          },
          {
            name: '曲线2',
            type: 'line',
            data: data2,
            smooth: true,
            symbol: 'circle',
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 0
              }
            },
            markLine: {
              symbol: ['none', 'none'],
              data: [
                {
                  name: '阈值',
                  yAxis: 110,
                  lineStyle: { type: 'dashed', color: '#317ECB', width: 1 } // 样式： 线型、颜色、线宽
                },



              ]
            },
            // markPoint: {
            //   data: [
            //     {
            //       name: '最高',
            //       value: 360,
            //       xAxis: 3,
            //       yAxis: 360,
            //       symbolSize: 40
            //     }
            //   ]
            // },
            itemStyle: {
              color: '#7CDCF0',
              borderColor: '#fff'
            },
            areaStyle: {
              normal: {
                shadowColor: '#2D7AD6',
                shadowBlur: 10
              }
            }

          },
          {
            name: '曲线3',
            type: 'line',
            data: data3,
            smooth: true,
            symbol: 'circle',
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 0
              }
            },
            markLine: {
              symbol: ['none', 'none'],
              data: [
                {
                  name: '阈值',
                  yAxis: 110,
                  lineStyle: { type: 'dashed', color: '#317ECB', width: 1 } // 样式： 线型、颜色、线宽
                },



              ]
            },
            // markPoint: {
            //   data: [
            //     {
            //       name: '最高',
            //       value: 360,
            //       xAxis: 3,
            //       yAxis: 360,
            //       symbolSize: 40
            //     }
            //   ]
            // },
            itemStyle: {
              color: '#E37E76',
              borderColor: '#fff'
            },
            areaStyle: {
              normal: {
                shadowColor: '#CE916A',
                shadowBlur: 10
              }
            }
          },
          {
            name: '曲线4',
            type: 'line',
            data: data4,
            smooth: true,
            symbol: 'circle',
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 0
              }
            },
            markLine: {
              symbol: ['none', 'none'],
              data: [
                {
                  name: '阈值',
                  yAxis: 110,
                  lineStyle: { type: 'dashed', color: '#317ECB', width: 1 } // 样式： 线型、颜色、线宽
                },



              ]
            },
            // markPoint: {
            //   data: [
            //     {
            //       name: '最高',
            //       value: 360,
            //       xAxis: 3,
            //       yAxis: 360,
            //       symbolSize: 40
            //     }
            //   ]
            // },
            itemStyle: {
              color: '#53fcee',
              borderColor: '#fff'
            },
            areaStyle: {
              normal: {
                shadowColor: '53fcee',
                shadowBlur: 10
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },

二、echarts饼图series里的label超出边界显示不全

调整label的显示角度

 minAngle: 15,//最小角度
 startAngle:270, //起始角度
 aviodLabelOverlap:true,//避免label堆叠

三、地图配置项

1.type：'lines'

{
                        name: '线路',
                        type: 'lines',
                        smooth:true,//线平滑
                        coordinateSystem: 'geo',
                        polyline: true, // true：线条为多段线条
                        effect: {
                            show: false,
                            period: 10,//路径流动速度
                            trailLength: 0.2,
                            color: '#5fe9b3', //流动点颜色
                            symbol: 'arrow',//流动图案circle pin等
                            symbolSize: 10
                        },
                        lineStyle: {
                            curveness:0.8,//线弯曲程度
                                type: 'solid',//线的样式solid dotted
                                // type: [5, 10],//线的样式solid dotted
                            dashOffset: 5,
                                color: 'rgb(1,255,255)',
                                width: 4.5,
                     
                        },
                        tooltip: {
                            formatter: function (value, ticket, callback) {
                                let zuobiao = myChart.convertToPixel({ geoIndex: 0 }, [
                                    value.data[0], value.data[1]
                                ]);
                                return '';
                            },
                        },
                        data: [
                            {
                                fromName: "",
                                toName: "",
                                value: [],
                                coords: [
                                    [101.963815, 30.050663, 0, ''],//甘孜
                                    [103.04954, 30.01679, 0, ''],//雅安
                                    [104.07274, 30.57899, 0, ''],//成都
                                    [105.59942, 30.53910, 0, ''],//遂宁
                                    [106.64853, 30.47977, 0, ''],//广安
                                    // [114.33832, 40.014408, 0, ''],
                                    // [114.33832, 40.014408, 0, '']
                                ],
                            },
          
                        ]
                    },

2.geo

         geo: {
                    map: `sichuan`,
                    center: [105.194115019531, 35.582111640625],
                    aspectScale: 0.75, //长宽比
                    zoom: 2,
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: `#10359b`,
                            shadowColor: `#337495`,
                            shadowOffsetX: 8,
                            shadowOffsetY: 20,
                            borderColor: `red`,
                            borderWidth: 10,
                            shadowBlur: 1
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    }
                },

四、resize失效问题

ResizeObserver - Web API 接口参考 | MDN

有时候我们可能会通过 JS 或 CSS 调整容器大小，由于页面大小并未发生改变，因此 resize 事件将不会被触发。如果有需要覆盖这种情况，可以借助浏览器的 ResizeObserver API 来实现更细粒度的监听。

resizeObserver.observe(divElem);

 echarts实例的清空和销毁

内存溢出：当程序运行时需要的内存超出了当前应用系统的剩余内存时，就造成了内存溢出的情况，直观表现就是——卡死。

所以只要使用echarts了，最好都clear或dispose一下。

echarts.clear()是清空当前实例，会移除实例中所有的组件和图表。

echarts.dispose()是销毁实例，销毁后实例无法再被使用。

我觉得clear和dispose就类似于v-show和v-if

clear类似于v-show，它只是重绘图表

dispose类似于v-if，它是将echarts对象清理了，然后重新构建echarts对象

如果连图表容器都被销毁了，那就要调用echarts.dispose()销毁实例

使用场景：当echarts图表的数据是动态更新然后渲染图表时，哪怕我们使用watch去监听了数据的变化，已经拿到了更新的数据，但是图表却没有进行相应的渲染，clear或dispose一下。
原文：echarts实例的清空与销毁_echarts 销毁-CSDN博客

 // 销毁实例
    desHander(){
        let myChart = echarts.init(this.$refs["chartDom"]);
        // 销毁实例，销毁后实例无法再被使用。
        // 在什么情况下需要调用该函数进行销毁当前的实例呢？
        // 官方给的说明:在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例，
        myChart.dispose();
    },
 
    // 清空当前实例
    clearHander(){
        // 清空当前实例，会移除实例中所有的组件和图表。
        let myChart = echarts.init(this.$refs["chartDom"]);
        myChart.clear() 
    },
    init(){
        this.clearHander()
          //或者
        this.desHander()
        let myChart = echarts.init(this.$refs["chartDom"]);
    }

五、echarts设置主题样式

主题编辑器 - Apache ECharts

六、环形轮播效果

<template>
    <div style="width:500px;height:500px;background-color:pink" ref="taskChart">

    </div>
</template>

<script>
export default {
    name: 'Test1DataOverView',

    data() {
        return {
            taskChart: null,
            timer: null,
            currentIndex: -1,
            option: {
                title: {
                    subtext: '   任务管理',
                    left: 'left',
                    subtextStyle: {
                        color: 'white',
                        fontSize: 15
                        // fontWeight: 'bolder'
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['56%', '66%'], // 通过设置内径与外径将饼图变为圆环饼图
                        center: ['40%', '55%'],
                        color: ['#29C5F6', '#3A9BDC', '#5579C6', '#1260CC'],
                        itemStyle: {
                            borderRadius: 40 // 设置圆环的圆角弧度
                        },
                        emphasis: { // 设置高亮时显示标签
                            label: {
                                show: true
                            },
                            scale: true, // 设置高亮时放大图形
                            scaleSize: 9
                        },
                        label: { // 设置图形标签样式
                            show: false, // 未高亮时不显示标签，否则高亮时显示的标签会与静态的标签重叠
                            textStyle: {
                                color: 'white'
                            },
                            position: 'center',
                            // 设置标签展示内容,其中{d}、{b}为echarts标签内容格式器
                            formatter: '{bStyle|{b}}:{cStyle|{c}}',
                            // 为标签内容指定样式，只能设置series-pie.label支持的样式
                            rich: {
                                bStyle: {
                                    fontSize: 20
                                },
                                cStyle: {
                                    fontSize: 15
                                }
                            }
                        },
                        data: [ // 饼图数据
                            { value: 2, name: '进行中' },
                            { value: 1, name: '未分配' },
                            { value: 1, name: '待执行' },
                            { value: 4, name: '总任务' }
                        ]
                    }
                ]


            }
        };
    },

    mounted() {
        this.init()
    },

    methods: {
        init() {
            this.taskChart = this.$echarts.init(this.$refs.taskChart)
            this.taskChart.setOption(this.option)
            this.taskChart.on('mouseover', (params) => {

                clearInterval(this.timer)
                this.currentIndex = params.dataIndex
                this.highlightPie()
            })
            this.taskChart.on("mouseout", (params) => {
                if (this.timer) {
                    clearInterval(this.timer)

                } this.changePieInterval()
            })
        },
        changePieInterval() {
            this.timer = setInterval(this.selectPie, 1000)
        },
        highlightPie() { // 取消所有高亮并高亮当前图形
            for (const idx in this.option.series[0].data) { // 遍历饼图数据，取消所有图形的高亮效果
                // echarts中支持的图表行为，通过dispatchAction触发。
                this.taskChart.dispatchAction({
                    //             dispatchAction({
                    //     type: 'highlight',
                    //     // 可选，系列 index，可以是一个数组指定多个系列
                    //     seriesIndex?: number|Array,
                    //     // 可选，系列名称，可以是一个数组指定多个系列
                    //     seriesName?: string|Array,
                    //     // 可选，数据的 index
                    //     dataIndex?: number,
                    //     // 可选，数据的 名称
                    //     name?: string
                    // })

                    type: 'downplay',//highlight 高亮指定的数据图形;.downplay 取消高亮指定的数据图形 
                    seriesIndex: 0,
                    dataIndex: idx
                })
            }
            // 高亮当前图形
            this.taskChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: this.currentIndex
            })
        },
        selectPie() { // 高亮效果切换到下一个图形
            const dataLen = this.option.series[0].data.length
            this.currentIndex = (this.currentIndex + 1) % dataLen
            console.log(0 % 4);
            this.highlightPie()
        }


    },
};
</script>

 

polarisya
关注
java后台生成echarts图表
11-13
PhantomJS 可以在服务器端运行，不依赖于任何用户界面，这使得在Java中生成ECharts图表成为可能。 要使用 `echartspoi` 相关的jar包，首先你需要将其添加到你的项目依赖中。`echartspoi` 是一个扩展了 Apache POI ...
Axure集成echarts图表组件.rplib
06-28
主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括...echarts Ax
Echarts图表介绍
wangxuanyang_zer的博客
10-22 1707
开发者可以自定义图表的外观，以满足特定的设计需求，从而保持一致的品牌标识。
echarts图表自适应
a15240780264的博客
01-31 1658
echarts的图片自适应
echarts图表插件
weixin_45782719的博客
02-05 1291
ECharts支持的图表类型非常丰富，包括但不限于柱状图、折线图、饼图、散点图、雷达图、地图、热力图、树图、桑基图等多种。这个问题通常是因为在试图初始化 ECharts 实例的时候，对应的 DOM 元素还没有被渲染或不可见，导致 ECharts 无法找到这个元素。中执行代码可能会在 DOM 元素准备好之前尝试访问它们，因此你需要确保在 DOM 元素可用时初始化 ECharts 实例。在 Vue 3 中，你可以使用。注意：在使用组合式 API 时，通过 ref 创建的引用在模板中使用时不需要。
创建ECharts图表
2301_77281478的博客
03-13 1347
提示框组件可以设置在多种地方：可以设置在全局，即。
Vue环境下，在单页面中遍历显示出多个Echarts图表
热门推荐
商务合作 | 共同学习 | 携手共进
12-02 9万+
在开发的过程中我们常常会用到 Echarts 图表，而有时候一个页面当中会有多处都使用到相同的一个图表只是数据有所差别；这个时候如果我们去一个个重新创建 dom、重新渲染，那就太麻烦了，代码量多不说还不便于修改。 最好的方法就是借助Vue框架的便捷性，通过 v-for 来将一个已经创建好的图表进行遍历，显示出多个图表，随后动态修改数据。 本文以横向柱状图为例。 Apache ECharts 的安装与引入此处省略，详情参见Handbook - Apach...
销毁 ECharts 图表
weixin_52630329的博客
08-31 3889
因此，在销毁之后，您应该确保不再使用该实例。方法初始化了一个 ECharts 实例，并将其存储在。这个方法会销毁图表，并释放所有的资源。如果想销毁 ECharts 图表，可以使用。注意，如果在销毁之后再次尝试使用。在这个例子中，我们首先使用。方法来销毁这个实例。
导出Echarts图表
起风了
10-12 1578
导出原理： 得到Echarts画出的canvas图片的base64，将其导出 代码： <el-button type="primary" @click="downLoad">导出</el-button> <div id="volume"></div> downLoad(){ var myChart = echarts.init(docume...
Echarts 图表自适应
...
01-29 1303
Echarts 图表自适应
echarts图表库的展示
m0_74242675的博客
05-26 1973
ECharts 是一个强大的，使用 JavaScript 编写的开源数据可视化库，由百度开发和维护。它能够帮助开发者在网页上轻松创建出丰富、交互式的图表，广泛应用于各种数据展示场景，包括但不限于Web应用、仪表盘、业务报表等。ECharts的特点和功能包括但不限于以下几点：如折线图、柱状图、散点图、饼图、雷达图、热力图、漏斗图、仪表盘、地图、关系图、旭日图、平行坐标等，几乎涵盖了数据可视化领域的所有基本需求。ECharts擅长处理多维数据，能够将复杂的数据集以清晰直观的方式展现出来，非常适合进行深度数据分析
echarts图表销毁
cdd9527的博客
09-06 3306
echarts图表销毁
echarts图表导出excel示例
09-04
在本文中，我们将深入探讨如何使用ECharts图表库来实现数据的导出功能，特别是将图表数据导出为Excel格式。ECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型和强大的交互性，广泛应用于Web应用...
微信小程序Echarts图表组件使用方法详解
10-16
上述内容提到css文件配置中的空白显示问题，这实际上是因为Echarts图表需要有足够大的区域来显示，所以需要确保在wxss中为ec-canvas设置正确的宽度和高度，通常设置为100%来确保其能够填满其父容器。 在开发微信小...
ASP.Net实现SQL动态绑定Echarts图表Demo完整源码
06-15
【ASP.Net实现SQL动态绑定Echarts图表Demo完整源码】是一个示例项目，它演示了如何在ASP.Net环境中结合Echarts图表库、C#、SQL和JSON技术来动态展示数据库中的数据。该项目的核心目标是利用后端服务器处理程序获取...
前端的全栈混合之路Meteor篇：3.0新版本介绍
分享有趣的、贴近生活的CS知识
10-01 1171
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 229
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1275
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
《ASP.NET Web Forms 实现短视频点赞功能的完整示例》
最新发布
Envyᥫᩣ的博客
10-05 1797
Play.aspx前端页面使用ASP.NET Web Forms和jQuery，后端使用C#和AJAX进行数据交互。希望本文对你有所帮助，如果有任何问题或建议，欢迎留言交流！
ECharts图表导出到Excel的Java实现
本文将详细介绍如何实现ECharts图表到Excel的导出功能。 首先，ECharts本身并不直接支持导出到Excel，但可以通过获取图表的Base64编码的图片数据，然后在后端将其处理并插入到Excel中来实现。以下是实现这一功能的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值