Vue引进echarts

1、命令行npm install echarts -S

没有安装npm的先另行百度安装

2、main.js中引入

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

3、创建一个Vue文件，引入

<template>
    <div style="width:550px;height:300px" ref="chart"></div>
</template>
<script>
const echarts = require('echarts');
export default {
  data() {
    return {};
  },
  methods: {
    initCharts() {
      let myChart = echarts.init(this.$refs.chart);
      console.log(this.$refs.chart); // 绘制图表
      myChart.setOption({
        title: { text: "在Vue中使用echarts" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 46, 10, 10, 20]
          }
        ],
        grid: {
            height: '40%',
            left: '20%',
            top: '20%'
        }
      });
    }
  },
  mounted() {
    this.initCharts();
  }
};
</script>

标签：Vue,引进,refs,20%,data,echarts,initCharts
来源： https://www.cnblogs.com/Lv-orange/p/15243099.html