vue实战demo，axios+封装echarts

1.安装axios和echarts

npm install --save axios
npm install --save echarts

2.在main.js 引入

import axios from 'axios'
import echarts from 'echarts'
//全局挂载
Vue.prototype.$http = axios;
axios.defaults.baseURL='http://127.0.0.1:3333/'
Vue.prototype.$echarts = echarts;

3.在组件中使用
axios

  getNav() {
      this.$http.get("/get_nav").then((res) => {
        console.log(res);
        let { code, msg } = res.data;
        if (code == "200") {
          this.items = result;
        }
      });
    },

封装echarts

<template>
  <div class="charts">
    <div ref="chart" id="main" style="width: 100%; height: 200px"></div>
  </div>
</template>
<script>
export default {
  name: "Charts",
  data() {
    return {};
  },
  props: ["type"],
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(this.$refs.chart);

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: this.type,
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
</style>

3.demo源码地址