Vue+echarts实现曲线图、柱形图

1、首先安装   npm install echarts --save

2、在main.js中导入模块  import * as echarts from 'echarts'

      并挂载到vue原型上  Vue.prototype.$echarts = echarts;

3、在组件中直接使用

   曲线图：

<template>
  <div class="rank">
    <div id="main" style="width: 1200px; height: 500px"></div>
  </div>
</template><script>
export default {
  name: "Rank-",
  components: {},
  mounted() {
    // 基于准备好的dom，初始化echarts实例

    var myChart = this.$echarts.init(document.getElementById("main"));

    // 指定图表的配置项和数据

    var option = {
      title: {
        text: "ECharts",
      },
      tooltip: {},
      xAxis: {
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {},
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          smooth: true,
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。

    myChart.setOption(option);
  },
};
</script>

柱形图：

<template>
  <div class="rank">
    <div id="main" style="width: 1200px; height: 500px"></div>
  </div>
</template>

<script>
export default {
  name: "Rank-",
  components: {},
  mounted() {
    // 基于准备好的dom，初始化echarts实例

    var myChart = this.$echarts.init(document.getElementById("main"));

    // 指定图表的配置项和数据

    var option = {
      title: {
        text: "ECharts",
      },
      tooltip: {},
      xAxis: {
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {},
      series: [
        {
          type: "bar",
          data: [23, 24, 18, 25, 27, 28, 25],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。

    myChart.setOption(option);
  },
};
</script>

4、效果图