vue中使用echarts（vue+vue-cli+axios+jsonp+echarts）

一、安装echarts：

cnpm i echarts -S

二、在vue-cli的main.js文件中引用echarts：

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

问题

引入 echars 5.0 遇到报错 "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’

解决

引入方式改为：

import * as echarts from 'echarts';
// 或
const echarts = require('echarts');

三、Charts详细代码：

Charts.vue：

<template>
  <div>
    <div id="myChart">

    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'));

        this.$axios.get("http://127.0.0.1:8000/get_data")
          .then(function(res){
            // 绘制图表
            myChart.setOption({
              title: { text: res.data.title },
              tooltip: {},
              xAxis: {
                data: res.data.xAxisData
              },
              yAxis: {},
              series: [{
                name: '销量',
                type: 'bar',
                data: res.data.seriesData
              }]
            });
          })
          .catch(function(err){
            console.log(err);
          })
      }
    },
    mounted(){
      this.drawLine();
    }
  }
</script>

<style>
#myChart{
  height: 500px;
}
</style>

四、上面的图表数据通过axios获取，node.js代码如下：

let express = require("express");
let app = express();
 
app.get("/get_data", function(req, res, next){
	res.header("Access-Control-Allow-Origin", "*");
    let response = {
    	title: '在Vue中使用echarts',
    	xAxisData: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
    	seriesData: [10, 26, 16, 20, 16, 30]
    };
    res.type('application/json');
    res.jsonp(response);
});
 
app.listen(8000, function(){
    console.log("开始执行请求");
});

五、引用Charts.vue：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>

    <Charts/>
  </div>
</template>

<script>
import Charts from './components/Charts.vue'
export default {
  name: 'App',
  components: {
    Charts
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>