做一个简单的柱状图

ECharts 图的配置项 option ，来来去去都是 xAxis、yAxis、series、tooltip、legend、title 等，做的项目多了，就手到擒来了。下面来做一个简单的柱状图。

<template>
  <div id="myChart" style="width: 500px; height: 300px"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let chartDom = document.getElementById("myChart");
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisTick: {
            show: false, // 不展示X轴刻度
          },
          axisLine: {
            show: true, // 展示X轴刻度线
            lineStyle: {
              color: '#ccc'
            }
          },
          splitArea: {
            show: false, // 不展示X轴分隔区域,
            areaStyle: {} // X轴分割区域样式
          },
          splitLine: {
            show: false, // 不展示X轴分割线
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, // 不展示Y轴刻度
          },
          axisLine: {
            show: true, // 展示Y轴刻度线
            lineStyle: {
              color: '#ccc'
            }
          },
          splitArea: {
            show: true, // 展示Y轴分隔区域
            areaStyle: {}, // Y轴分割区域样式 
          },
          splitLine: {
            show: false, // 不展示Y 轴分割线
          }
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            barWidth: 30,
            showBackground: false, //是否展示柱条的背景颜色
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: { // 柱条样式
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
          },
        ],
        // 内置弹窗
        tooltip: {
          show: true,
        },
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

好啦，凑合看一下！正好思考一个问题：如果我们柱状图的条目非常多，接口返回几十条数据甚至更多，那我们岂不是要准备一个大大的盒子？？？

让柱状图“滚”起来

既然展示几十百把条数据不太现实（虽然能实现，但是密集恐惧症要犯了，然后需求经理也不会让这么干吧），那我们就想办法让它只展示部分，剩余的由用户选择展示，譬如滚动展示、分页展示等。不巧的是，option 里刚好有一个配置项可以完美的解决这一问题：dataZoom。来吧，展示。

     // 定义 dataZoom,并塞到 option 里面去
      let dataZoom = [
        {
          show: true,
          type: "slider",
          orient: "horizontal",
          realtime: true,
          height: 20,
          startValue: 0,
          endValue: 3,
          bottom: "6",
          showDetail: false,
          zoomLock: true, // 只能平移，不能缩放
          backgroundColor: "#83bff6", // 组件的背景颜色
          fillerColor: "#188df0", //选中范围的填充颜色。
          borderColor: "transparent", // 组件的背景边框颜色
          handleSize: 0, // 控制手柄的尺寸
          dataBackground: {
            //数据阴影的样式。
            width: 200,
            height: 30,
            lineStyle: {
              color: "transparent",
            },
            areaStyle: {
              color: "transparent",
            },
          },
          brushSelect: true,
          brushStyle: {
            borderCap: "round",
          },
        },
        {
          type: "inside",
          xAxisIndex: 0,
          moveOnMouseWheel: true, // 开启滚轮平移
          moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
          zoomOnMouseWheel: false, //关闭滚轮缩放
        },
      ];

现在拖动滑块或滚动鼠标，柱状图就可以自由“滚”起来啦！