echarts实现锥形柱状图

最新推荐文章于 2024-07-05 14:39:20 发布

一心只敲圣贤码

最新推荐文章于 2024-07-05 14:39:20 发布

阅读量3.8k

点赞数 1

分类专栏： Echarts

本文链接：https://blog.csdn.net/qq_40262774/article/details/117793306

版权

Echarts 专栏收录该内容

4 篇文章 9 订阅

订阅专栏

本文介绍如何利用ECharts库中的pictorialBar类型，结合symbol为triangle的设置，来实现独具特色的锥形柱状图效果。

摘要由CSDN通过智能技术生成

注意选择series中的type必须是pictorialBar,以及symbol必须是triangle.

  const option = {
            dataset:{
              source:[
                {name:'冰淇淋0',count:111,percent:'20%'},
                {name:'冰淇淋1',count:211,percent:'20%'},
                {name:'冰淇淋2',count:311,percent:'20%'},
                {name:'冰淇淋3',count:411,percent:'20%'},
                {name:'冰淇淋4',count:511,percent:'20%'}

            ]},
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'none'
              },
              formatter: function (params) {
                console.log(params,'params......')
                return JSON.stringify(params[0].name+":"+params[0].value.count);
                // return params[0].name + ': ' + params[0].count;
              }
            },
            xAxis: {
              type:'category',
              axisTick: {show: false},
              axisLine: {show: false},
              axisLabel: {
                textStyle: {
                  color: 'blue'
                }
              }
            },
            yAxis: {
              type:'value',
              splitLine: {show: false},
              axisTick: {show: false},
              axisLine: {show: false},
              axisLabel: {show: false}
            },
            series: [{
              name: 'hill',
              type: 'pictorialBar',
              barCategoryGap: '40%',
              symbol: 'triangle',
              itemStyle: {
                normal: {
                  opacity: 0.5,
                  color:'green'
                },
                emphasis: {
                  opacity: 1
                }
              }
            }]
          };