电商直播系统开发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: "平均值" }]
          }
        }
      ]
    });
  }