電商直播系統開發ECharts柱狀圖屬性配置

因爲是在vue中使用的，所以需要現在main.js中引入並註冊

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

這些屬性是在官網看配置項外加看視頻，然後一點一點去整理的。
可能不多，不過基本夠用了。

let myChart1 = this.$echarts.init(document.getElementById("box"));
    myChart1.setOption({
      title: {
        text: "某地區蒸發量和降水量",
        // 副標題
        subtext: "純屬虛構",
        // 水平方向位置
        left: "center"
        // title背景顏色
        // backgroundColor:"#000000"
        // 字體樣式
        /* textStyle:{
                color:"#ffffff"
            }, */
        // 副標題樣式
        /* subtextStyle:{
                color:"green"
            } */
      },
      tooltip: {
        // 可選值，如果是item的話只有鼠標移動到柱狀圖上纔會有提示，如果是axis的話移動到當前刻度就會有提示
        trigger: "axis"
      },
      legend: {
        data: ["蒸發量", "降水量"],
        left: "left"
      },
      // 右側的切換模塊  可以切換展示方式
      toolbox: {
        show: true,
        // 工具箱排列方式  默認horizontal  可選vertical
        orient: "horizontal",
        //  工具箱字體大小  默認15
        itemSize: 16,
        //  每項之間的間隔
        itemGap: 10,
        //  在鼠標懸浮是是否顯示標題  默認true
        showTitle: true,
        feature: {
          // 直接以表格形式展示數據
          dataView: {
            lang: ["數據視圖", "關閉", "刷新"],
            show: true,
            // 是否只讀
            readOnly: false,
            // 文本顏色
            textColor: "",
            // 按鈕顏色
            buttonColor: "",
            // 按鈕文本顏色
            buttonTextColor: "",

            iconStyle: {
              // 邊框顏色
              borderColor: "red",
              // 邊框寬度
              borderWidth: 0,
              // 邊框類型
              borderType: "solid",
              // 文字相關配置
              emphasis: {
                iconStyle: {
                  // 文本位置
                  textPosition: "left",
                  // 文本顏色
                  textFill: "red",
                  // 文本對齊方式
                  textAlign: "center",
                  // 文本區域背景填充色
                  textBackgroundColor: "",
                  // 文本區域圓角大小
                  textBorderRadius: 5,
                  // 文本區域內邊距
                  textPadding: 0
                }
              }
            }
          },
          // 區域縮放和區域縮放還原
          dataZoom: {
            show: true,
            // 可選項，默認就是這些內容
            title: {
              dataZoom: "區域縮放",
              dataZoomReset: "區域縮放還原"
            }
          },
          //   顯示位置
          //   left:
          magicType: {
            show: true,
            //   動態切換類型   可選值 'line', 'bar', 'stack', 'tiled'
            type: ["line", "bar"]
          },
          // 還原
          restore: {
            show: true,
            iconStyle: {
              // 整體圖標顏色
              // color:"red",
              // 邊框顏色
              borderColor: "blue"
            }
          },
          // 保存爲圖片
          saveAsImage: {
            show: true,
            // 保存圖片類型  默認png
            type: "png",
            // 保存圖片名稱  默認使用 title.text
            name: "",
            // 保存圖片背景  默認白色
            backgroundColor: "auto",
            // 保存圖片忽略的組件列表  默認工具欄
            excludeComponents: "toolbox"
          }
        }
      },
      // 是否可拖拽   餅圖用的比較多
      // calculable: true,
      // 數據區域縮放
      dataZoom: {
        show: true,
        // 縮放變化是否實時顯示
        realTime: true,
        // 起始位置
        start: 0,
        // 結束位置
        end: 100
      },
      xAxis: [
        {
            //   圖表兩邊是否留白
        // boundaryGap: false,
          // 座標軸類型  可選value category time log
          type: "category",
          // 座標軸名稱
          name: "事件線",
          // 座標軸數據
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ]
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: [
        {
          name: "蒸發量",
          // 圖表類型
          type: "bar",
          // 可視化數據
          data: [
            2.0,
            4.9,
            7.0,
            23.2,
            25.6,
            76.7,
            135.6,
            162.2,
            32.6,
            20.0,
            6.4,
            3.3
          ],
          markPoint: {
            data: [
              // 所有數據的最大最小值
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          },
          markLine: {
            data: [
              // 平均值
              { type: "average", name: "平均值" }
            ]
          }
        },
        {
          name: "降水量",
          type: "bar",
          data: [
            2.6,
            5.9,
            9.0,
            26.4,
            28.7,
            70.7,
            175.6,
            182.2,
            48.7,
            18.8,
            6.0,
            2.3
          ],
          markPoint: {
            data: [
              { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },
              { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 }
            ]
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }]
          }
        }
      ]
    });
  }