echarts-锥型柱状图

代码:

<div class="leftCard" id="hiddenDanger" ref="hiddenDangerRef"></div>

<script>
mounted(){
    this.getCharts()
},
methods:{
 getCharts() { 
      let chartDom = document.getElementById('hiddenDanger');
      let myChart = this.$echarts.init(chartDom);
      this.option = {
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          triggerEvent: true,
          axisTick: {
            alignWithLabel: true,
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#D3EBFF',
              type: 'solid'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#D3EBFF',
              fontSize: '18'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '单位:条',
          min: 0,
          interval: 100,
          nameTextStyle: {
            color: '#D3EBFF',
            fontSize: 18,
            nameLocation: 'start',
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#35618B'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#D3EBFF',
              fontSize: '18'
            }
          }
        },
        series: [
          {
            emphasis: {
              itemStyle: {
                opacity: 1
              }
            },
            data: [136, 260, 280, 165, 220, 260, 158, 165, 40, 130, 290, 210],
            type: 'pictorialBar',
            barCategoryGap: '-80%',/*多个并排柱子设置柱子之间的间距*/
            symbol:
              'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
              normal: {
                color: 'rgba(9, 136, 204, 0.3500)'
              }
            },
            z: 10,

          }
        ]
      }; 
      myChart.setOption(this.option);
    },
}



</script>

 

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值