Echarts——绘制饼图并导入数据,tooltip中的formatter使用方法

目录

 tooltip中的formatter属性(提示框设置)


这里使用饼图中的环形图作为示例

首先新建一个盒子,通过ref获取DOM元素,并设置其宽高(一定要加宽高!)

 <div ref="opendoor" style="width: 100%; height: 225px"></div>

创建饼图并修改其样式

      var myChart = echarts.init(this.$refs.opendoor);
      var option;

      option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(74, 144, 226, 0.84)",
        },
        // 右侧的五个小圆球
        legend: {
          orient: "vertical",
          right: 10,
          bottom: 20,
          textStyle: {
            color: "#999",
            padding: [2, 0, 0, 3], // 提示内边距
          },
          icon: "circle", // 形状
          itemWidth: 10,
          itemHegiht: 10,
          selectedMode: false, // 禁用鼠标移动显示效果
        },
        series: [
          // 对饼图以及内容的操作
          {
            name: "开门渠道占比",
            type: "pie",
            left: "-22%",
            top: "3%",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            // center: ["50%", "50%"],
            label: {
              show: false,
              position: "center",
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "rgba(16,16,21,0.4)",
            },
            emphasis: {
              label: {
                color: "#4a90e2",
                show: true,
                fontSize: "14",
                lineHeight: 22,
              },
            },
            color: [
              "#60ADCD",
              "#517EDA",
              "#C95C45",
              "#F6BD16",
              "#51BC93",
              "#536382",
            ],
            labelLine: {
              show: true,
            },
            data: optionData,
          },
        ],
      };

      option && myChart.setOption(option);

   在外层包裹一个函数进行使用

rightBottom() {
      if (userChannelData.code !== 0) return;
      let optionData = [
        {value: userChannelData.data.wxMiniOpenCount || 0, name: '小程序开门'},
        {value: userChannelData.data.userFaceOpenCount || 0, name: '人脸开门用户'},
        {value: userChannelData.data.appOpenCount || 0, name: 'App开门'},
        {value: userChannelData.data.aliPayOpenCount || 0, name: '支付宝开门'},
        {value: userChannelData.data.otherOpenCount || 0, name: '其他'}
      ]
      var myChart = echarts.init(this.$refs.opendoor);
      var option;

      option = {
        tooltip: {  // 提示框样式
          trigger: "item",         
          backgroundColor: "rgba(74, 144, 226, 0.84)",
        },
        // 右侧的五个小圆球
        legend: {
          orient: "vertical",
          right: 10,    // 位置
          bottom: 20,
          textStyle: {
            color: "#999",
            padding: [2, 0, 0, 3], // 提示内边距
          },
          icon: "circle", // 形状
          itemWidth: 10,
          itemHegiht: 10,
          selectedMode: false, // 禁用鼠标移动显示效果
        },
        series: [
          // 对饼图以及内容的操作
          {
            name: "开门渠道占比",
            type: "pie",
            left: "-22%",
            top: "3%",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            // center: ["50%", "50%"],
            label: {
              show: false,
              position: "center",
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "rgba(16,16,21,0.4)",
            },
            emphasis: {
              label: {
                color: "#4a90e2",
                show: true,
                fontSize: "14",
                lineHeight: 22,
              },
            },
            color: [
              "#60ADCD",
              "#517EDA",
              "#C95C45",
              "#F6BD16",
              "#51BC93",
              "#536382",
            ],
            labelLine: {
              show: true,
            },
            data:optionData ,
          },
        ],
      };

      option && myChart.setOption(option);
    },

mounted中调用

  this.rightBottom();// 开门渠道占比

把图表中的data单独拎出来进行百分比装换(里面是模拟的数据结构)

      let optionData = [
        {value: userChannelData.data.wxMiniOpenCount || 0, name: '小程序开门'},
        {value: userChannelData.data.userFaceOpenCount || 0, name: '人脸开门用户'},
        {value: userChannelData.data.appOpenCount || 0, name: 'App开门'},
        {value: userChannelData.data.aliPayOpenCount || 0, name: '支付宝开门'},
        {value: userChannelData.data.otherOpenCount || 0, name: '其他'}
      ]

结构如下:

 tooltip中的formatter属性(提示框设置)

内容如下给出解释:

tooltip : {
    formatter:  '{a} <br/>{b}: {c} ({d}%)',//默认值null,内容格式器
            //折线(区域)图、柱状(条形)图、K线图 : a(系列名称),b(类目值),c(数值), d(无)
            //散点图(气泡)图 : a(系列名称),b(数据名称),c(数值数组), d(无)
            //地图 : a(系列名称),b(区域名称),c(合并数值), d(无)
            //饼图、雷达图、仪表盘、漏斗图: a(系列名称),b(数据项名称),c(数值), d(饼图:百分比 | 雷达图:指标名称)
}

效果如下: 

鼠标旋移中间的样式如下:

            emphasis: {
              label: {
                color: "#4a90e2",
                show: true,
                fontSize: "14",
                lineHeight: 22,
                formatter: '{d}% \n {b}'    //这个意思大概就是上层是百分比下层是名称
              },
            },

 原先官网给出的图

修改之后的效果:

加个自动的时间戳详情见自动轮播提示框

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论

打赏作者

Nanchen_42

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值