柱狀圖

柱狀圖

let option = {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效
          type: 'none'        // 默認(rèn)為直線,可選為:'line' | 'shadow'
        },
        formatter(p) {
          return p[0].data.showText
        }
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['該車型', '同價(jià)位車型'],
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: ['#ffffff']
            }
          },
          axisLine:{
            lineStyle:{
              color: '#eeeeee'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666666'
            }
          }
        }
      ],
      yAxis: [
        {
          max,
          // 值展示的類型,value直接展示value,category可以展示自定義
          type: 'value',
          show: false,
          interval,
          // 軸線上凸出來的點(diǎn)線
          axisTick: {
            show: false
          },
          // 坐標(biāo)軸軸線相關(guān)設(shè)置
          axisLine: {             
             // 是否顯示坐標(biāo)軸軸線
            show: false,        
          },
          // 軸線文本
          axisLabel: {
            show: true,
            textStyle: {
              color: '#666666'
            }
          },
          /// 影響網(wǎng)格線
          splitLine: {
            show: true,
            lineStyle:{
              color: ['#eeeeee'],
              width: 1,
              type: 'solid'
            }
          }
        }
      ],
      series: [
        {
          type: 'bar',
          ccc: '60%',
          // 內(nèi)部或者頂部可以展示文本
          label: {
            show: true,
            position: 'insideRight'
          },
          data: [{
            showText: '經(jīng)銷商報(bào)價(jià):20-15萬\n經(jīng)銷商數(shù)量:8家',
            name: 'hello',
            value: 20
          }, 15, 30, 1, 5, 8, 12],

                show: true,     //開啟顯示
                position: 'top',    //在上方顯示
                textStyle: {        //數(shù)值樣式
                  color: '#333',
                  fontSize: 14,
                  fontWeight: 500
                }
              },
          /// 軸風(fēng)格配置
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [{
                offset: 0,
                color: '#00B8B0'
              }, {
                offset: 1,
                color: '#0C98E7'
              }]),
              barBorderRadius: [3, 3, 0, 0]
            }
          }
        }
      ],

    };
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容