首页 前端知识 echarts-锥型柱状图

echarts-锥型柱状图

2024-06-06 00:06:05 前端知识 前端哥 66 75 我要收藏

代码:

<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>

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11001.html
标签
评论
发布的文章

js 指定光标位置

2024-06-10 23:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!