Vue 中 echarts 的使用

echarts 官网：http://www.echartsjs.com/index.html

文档：http://www.echartsjs.com/api.html#echarts

实例：http://www.echartsjs.com/examples/，可以在线编辑代码，调试鲜果；

在 Vue 中实际使用如下所示：

image.png

<template>
    <div class="root">
        <div id="main">
            <div id="time-chart"></div>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
import echarts from "echarts";

export default {
  methods: {
    drawTimeBarChart() {
      var myChart2 = echarts.init(document.getElementById("time-chart"));
      var max_y = 40;
      var option = {
        title: {
          text: "",
          textStyle: {
            color: "#343434",
            fontSize: "14"
          }
        },
        xAxis: {
          type: "category",
          data: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00"
          ],
          axisLabel: {
            show: true,
            fontSize: 12,
            color: "#999999",
            interval: function(index, name) {
              if (index % 6 == 0 || index == 23) return true;
              else return false;
            }
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          },
          axisLabel: {
            fontSize: 12,
            color: "#999999",
            formatter: function(value) {
              if (value >= max_y) {
                return value + "步";
              } else return value;
            }
          }
        },
        series: [
          {
            data: [
              1110,
              2110,
              3110,
              4110,
              4110,
              3114,
              3110,
              2115,
              1112,
              10,
              20,
              30,
              410,
              40,
              34,
              3110,
              25,
              112,
              10,
              2110,
              3110,
              40,
              4110
            ],
            type: "bar",
            barWidth: 10,
            itemStyle: { normal: { color: "#52BA9F" } }
          }
        ]
      };
      myChart2.setOption(option);
    },
  },
  mounted: function() {
    this.drawTimeBarChart();
  }
};
</script>

<style scoped lang="scss">
.root {
  height: 1200px;
  width: 652px;
  position: relative;
  border: 2px solid #f1f1f1;
}


#main {
  height: 200px;
  position: relative;
}


#time-chart {
  box-sizing: border-box;
  position: absolute;
  margin: auto;
  top: 0px;
  left: 0;
  bottom: 0;
  right: 100%;
  height: 200px;
  width: 100%;
}
</style>