vue项目中使用echarts

vue项目中使用echarts图表的demo

<template>
  <div id="app">
    <!-- 放置echarts图表的容器 -->
    <div id="echarts_box"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';  // echarts所有图表类型全部引入

// 11-31行是按需引入
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
// import * as echarts from 'echarts/core';
// // 引入柱状图图表，图表后缀都为 Chart
// import {
//     BarChart
// } from 'echarts/charts';
// // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
// import {
//     TitleComponent,
//     TooltipComponent,
//     GridComponent,
//     LegendComponent
// } from 'echarts/components';
// // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
// import {
//     CanvasRenderer
// } from 'echarts/renderers';
// // 注册必须的组件
// echarts.use(
//     [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer,LegendComponent]
// );

export default {
  name: 'Home',
  data(){
    return {

    }
  },
  mounted(){
    this.intChart();   // dom加载完成后初始化图表
  },
  methods: {
    intChart(){
      let barChart = echarts.init(document.getElementById('echarts_box'))
      barChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['2021/02/23', '2021/02/26', '2021/03/01', '2021/03/204', '2021/03/07', '2021/02/13']
        },
        yAxis: {
            type: 'value'
        },
        legend: {
          show: true,
          data: [ '成功', '失败']
        },
        series: [{
            name: '成功',
            type: 'bar',
            data: [7, 5, 6, 8, 4, 2]
        },
        {
          name: '失败',
          type: 'bar',
          data: [3, 3, 5, 6, 6, 1]
        }
        ]
      })
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
/* 放置图表的容器须有宽度和高度，否则不显示 */
#echarts_box {
  width: 600px;
  height: 600px;
  margin: auto;
}
</style>