echarts 柱狀圖和坐標軸 配置

近期一直在使用 echarts ， 對里面的常用配置做一個記錄

通常的 react 項目中引用

import echarts from 'echarts';

    var myChart = null;
    myChart = echarts.init(document.getElementById('id'));

另外一個項目中普通引用報錯（ice微應用），換了一種引用方式解決了：

import * as echarts from 'echarts';

    let myChart: any = null;
    const dom = document.getElementById('id') as HTMLDivElement;
    myChart = echarts.init(dom);

配置

    let xData = ['09/21', '09/22', '09/23', '09/24', '09/25'],
      data = [88, 45, 67, 12, 85];
    // if (list.length) {
    //   list.forEach((m) => {
    //     xData.push(m.date.replace('-', '/'));
    //     data.push(parseFloat(m.ratio));
    //   });
    // }
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }, // 默認為直線，可選為：'line' | 'shadow'
        formatter: '{b}{a}：{c}%', // 格式化文檔
      },
      grid: {
        // 直角坐標系內繪圖網格, 可以理解為拉伸定位
        top: '30px',
        bottom: '20px',
        left: '20px',
        right: '20px',
        containLabel: true, // grid 區域是否包含坐標軸
      },
      xAxis: {
        type: 'category',
        data: xData, // 間隔名字
        axisLine: { show: false }, // 軸線
        axisTick: { show: false }, // 刻度
        splitLine: { show: false }, // 分隔線
        axisLabel: { color: '#666666' },
      },
      yAxis: {
        // name: '單位', // 坐標軸名稱
        type: 'value',
        min: 0, // y軸最小值
        max: 100, // y軸最大值
        axisLabel: {
          formatter: '{value}%', // y軸1%-100%格式化
          color: '#666666',
        },
        axisLine: { show: true, lineStyle: { color: '#eeeeee' } }, // 軸線
        splitLine: { show: true, lineStyle: { color: '#eeeeee' } }, // 分隔線
        // nameTextStyle: { color: '#777777' }, // 名字樣式
        axisTick: { show: false }, // 刻度
      },
      series: [
        {
          name: '開工率',
          type: 'bar',
          barWidth: '32%', // 柱子寬度
          label: {
            show: false, // 數據是否在柱子上展示
            position: 'top',

　　　　　　　fontSize: 10,

　　　　　　　formatter: function(val) {  // 格式化文檔

              　　return val

            　},

          },
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: '#00C15E' },
            { offset: 0.5, color: '#187BDB' },
            { offset: 0, color: '#3C9CF9' },
          ]), // 漸變色 柱子
          data: data, // 數據
        },
      ],
    };
    myChart.setOption(option);

展示效果

  

 

containLabel 設為false

 

圖解

 

 如果 其中有柱子顏色不一樣(圖例中前三個顏色不一樣),數據格式應為

    let data = [],
      xData = [];
    list.forEach((m, i) => {
      xData.push(m.t);
      if (i < 3) {
        data.push({
          value: m.weekPoliceCount,
          itemStyle: {
            color: i === 0 ? '#0078FF' : i === 1 ? '#00feff' : '#00ff38',
          },
        });
      } else {
        data.push(m.weekPoliceCount);
      }
    });
    // 處理結果為 數據隨意填的, 看格式就好
    data =[
        { value: 85, itemStyle: { color: '#0078FF' } },
        { value: 80, itemStyle: { color: '#0078FF' } },
        { value: 77, itemStyle: { color: '#0078FF' } },
        66,
        55,
        44,
    ]

效果圖

 

添加象形圖配置

      series: {
        type: 'pictorialBar',
        barCategoryGap: '-10%',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        color: '#0078FF',
        label: {
          show: true,
          position: 'top',
        },
        data: data,
      },

echarts配置項