vue项目引入ECharts

ECharts图表在可视化大屏项目中应用最广泛,可以最直观的显示数据,满足客户的各种需求,接下来我来分享一下有趣的Echarts图表!

第一步安装依赖

普通安装 npm install echarts --save

淘宝镜像 cnpm install echarts -S

第二步在main.js中全局引入

import *as echarts from 'echarts'
Vue.prototype.$echarts = echarts

第三步创建图表

<template>
  <div class="home">
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>
<script>
export default {
  methods: {
    drawChart() {
      let myChart = this.$echarts.init(document.getElementById("main"));
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.drawChart();
  }
}
</script>

看一下效果图

 为了减少代码量,放了一个简单的图表,大家可以换复杂的看一下效果.

踩雷一!

new echarts.graphic.LinearGradient
new this.$echarts.graphic.LinearGradient

如果大家遇到这个报错,把上边的代码换成下边的就好了.

踩雷二!!

大家创建完新项目安装Echarts依赖的时候可能会遇到以下报错.

 不用慌,先安装项目依赖.

npm install

然后Echarts就会安装成功了!