echarts实现柱状图、折线图提示信息自动轮播

最新推荐文章于 2024-03-15 17:35:33 发布

原创最新推荐文章于 2024-03-15 17:35:33 发布 · 3.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts提示信息自动轮播 #自定义markPoint形状 #Echarts使用矢量图

echarts 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用ECharts自定义markPoint实现图表上的特殊标记，并通过修改官方示例展示了如何设置自定义形状、位置及颜色，最终实现图表信息的自动轮播效果。

实现这个柱状图、折线图的头部信息自动轮播，一开始看到ui设计的这个图的时候，我第一个想到的就是echarts官网示例中的markpoint提示内容，因为这个实在看起来不像是tooltip的悬浮提示，但是markpoint是最大值、最小值与平均值，所以我把markpoint的选项pass掉了，采用label信息的定时来回显示，做完效果之后呢，官网label配置项没有对下方那个倒三角型的修饰，所以最后我又考虑起来了markpoint，是否真的只能设置最大值、最小值、平均值，还能不能设置其他值呢，网上查看了好几篇博客，最后让我找到了markpoint的配置方式，我这里贴上一个官方示例修改后的写法，估计想要这个效果的同学就懂了

option = {
    title: {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [
        {
            name: '最高气温',
            type: 'line',
            data: [11, 11, 15, 13, 12, 13, 10],
            markPoint: {
                symbol:'path://M301.952 931.968a29.056 29.056 0 0 0 14.464-3.712l273.536-149.376h90.752c168.832 0 311.296-148.736 311.296-324.736V398.08A309.12 309.12 0 0 0 680.704 92.032H343.296A309.12 309.12 0 0 0 32 398.08v56.064C32 600.064 128 716.8 272 752.64v149.504a29.824 29.824 0 0 0 29.952 29.824z m0 0',
                symbolOffset:[0,-25],
                itemStyle:{
                    color:'cyan',  
                },
                data: [
                    {xAxis:3,yAxis:13,value:13},
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
    ]
};

echarts示例官网效果

这里可以看到这个markpoint的图形形状我是用svg绘制的矢量路径，具体这个形状是怎么来的呢？当然不可能是我手绘计算svg形状的，这里‘path：//’

后面的值是我在阿里巴巴矢量图标库中找到并下载copy的svg图形绘制路径，就是path标签中一长串与这个类似的字符串就行，至于symboloffset是设置这个自定义形状的偏移量，itemstyle设置它的颜色，关键在于data那里了，取消官方示例中的type类型和name属性，加上xaxis，yaxis，value这三个属性值，xaxis是横坐标数组的下标，yaxis是纵坐标数组中对应前面下标的值，value是markpoint的值。

到这里设置好后，实现自动轮播的效果，我们加个定时器，然后设置每隔一段时间后，data数组中的对象值的变动，在对其echarts进行重新绘制即可，因为我的项目是vue，所以我每次改变值的时候，都是用的this.$set对其echarts的option配置信息重新设定即可。