Vue + echarts 实现文章类型数量统计

npm i echarts@4.9.0 --save

Handbook - Apache ECharts

main.js引入

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router/index'
import echarts from 'echarts'
import store from './store/index'

//全局使用
Vue.use(ElementUI);
//echart添加到实例中
Vue.prototype.$echarts = echarts

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

index.vue

        在echarts的制作中，需要发送两次请求才能拿到x,y轴的数据，于是选择使用Promise.all实现两个ajax同时请求，如果有一个失败，就执行失败的回调

<!--  -->
<template>
  <div>
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
import api from "@/utils/api/index.js";
export default {
  name: "",
  data() {
    return {};
  },
  created() {
    //0. 调用
    this.getData();
  },
  mounted() {},
  methods: {
    //3.视图数据被调用
    getView(typeArr, numArr) {
      // 3.1 初始化echarts实例 基于准备好的dom
      var myChart = this.$echarts.init(document.getElementById("main"));
      // 3.2 定义图表的配置项和数据
      var option = {
        title: {
          text: "文章统计",
        },
        tooltip: {},
        xAxis: {
          data: typeArr,
        },
        yAxis: {},
        series: [
          {
            name: "文章数量",
            type: "bar",
            data: numArr,
          },
        ],
      };
      // 3.3 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    //1.获取文章信息 调取接口
    getData() {
      Promise.all([api.getChannelList(), api.getArticlebyChannel()]).then(
        (data) => {
          //分类数据
          let typeList = data[0].data;
          //文章数量
          let num = data[1].data;
          //分类数组
          let typeArr = typeList.map((item) => item.name); //['动态资讯', '产品服务', '解决方案', '精选案例']
          //数量数组
          let numArr = num.map((item) => item.articles); //['14', '8', '6', '3']
          //2.调用生成统计图方法 传参
          this.getView(typeArr, numArr);
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
};
</script>

<style scoped>
</style>