echarts饼图点击区块事件

简介: echarts饼图点击区块事件

效果图:

代码:

let option = {
        color: pieColors,
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['36%', '56%'],
            avoidLabelOverlap: false,
            label: {
              formatter: params => {
                // console.log(params)
                return `{color${params.dataIndex}|${params.name}(${params.value})}`
              },
              rich: richColor
            },
            labelLine: {
              lineStyle: {
                width: 3
              }
            },
            data: chartData
          }
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}'
        }
      }
      chart.setOption(option)
      chart.on('click', function (params) {
        // 控制台打印数据的名称
        console.log(params.data.name);
        _this.$router.push({path: "/jbxx/xsxx", query: { name: params.data.name }})
      });
目录
相关文章
ECharts 饼图数据放在饼图内部显示
ECharts 饼图数据放在饼图内部显示
268 0
|
3月前
|
数据格式
ECharts 饼图
本章节我们将绘制饼图。
64 15
|
2月前
|
XML 前端开发 数据库
echarts饼图前后端代码SpringCloud+Vue3
echarts饼图前后端代码SpringCloud+Vue3
37 0
|
4月前
|
JavaScript
Echarts——VUE中如何给echarts绑定click事件
Echarts——VUE中如何给echarts绑定click事件
256 1
|
6月前
|
JavaScript 开发工具 git
大事件项目17----Vue项目引入Echarts
大事件项目17----Vue项目引入Echarts
大事件项目17----Vue项目引入Echarts
|
4月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
146 0
|
6月前
|
开发者 容器
Echarts饼图实现-今日进度-动态图
构建一个动态旋转的ECharts饼图,包括渐变色和动画效果。初始化ECharts实例,设置图表尺寸和背景,配置标题、颜色、系列数据及自定义渲染。利用`renderItem`绘制弧线和圆点,`getCirlPoint`计算坐标。通过`setInterval`和`draw`函数实现旋转动画。完整代码可在链接下载。
167 0
Echarts饼图实现-今日进度-动态图
|
5月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
466 0
|
6月前
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
|
6月前
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
下一篇
DataWorks