引用自:https://www.yunliantaida.com

效果

image.png

环境

• node v10.16.3
• vue 3.10.0
• nuxt.js 2.8.1
• echarts 4.4.0

nuxt.js安装百度图形组件

npm install echarts -S

配置nuxt组件

创建 /components/Echarts.vue

<template>
  <div id="echarts"></div>
</template>

<script type="text/javascript">
import { mapActions, mapState } from 'vuex'
export default {
  name: 'Echarts',
  computed: mapState({
    'selectStatusTotal': state => state.question.selectStatusTotal,
  }),
  watch: {
    'selectStatusTotal': function (val) {
      this.$echartsInit('echarts', {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['待办', '处理中', '逾期处理中']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['进度']
        },
        series: [
          {
            name: '待办',
            type: 'bar',
            stack: '总量',
            color: "#919090",
            label: {
              normal: {
                show: val.notDealNumber > 0,
              }
            },
            data: [val.notDealNumber]
          },
          {
            name: '处理中',
            type: 'bar',
            stack: '总量',
            color: '#47F82F',
            label: {
              normal: {
                show: val.goingNumber > 0,
              }
            },
            data: [val.goingNumber]
          },
          {
            name: '逾期处理中',
            type: 'bar',
            stack: '总量',
            color: '#E66006',
            label: {
              normal: {
                show: val.overdueGoingNumber > 0,
              }
            },
            data: [val.overdueGoingNumber]
          },
        ]
      })
    }
  },
  data () {
    return {}
  },
  mounted () {
    this.$store.dispatch('question/querySelectStatusTotal')
  }
}
</script>
<style>
#echarts {
  width: 100%;
  height: 110px;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
</style>

创建插件

项目中创建 plugins/echarts.js

import Vue from 'vue';
import echarts from 'echarts';
function echartsInit(idname, option) {
  let myChart = echarts.init(document.getElementById(idname), 'macarons');
  myChart.setOption(option);
}
Vue.prototype.$echartsInit = echartsInit; // 引入组件（将echarts注册为全局）

增加插件配置 nuxt.config.js

  plugins: [ '@/plugins/echarts']

更多图形配置

https://www.echartsjs.com/examples/zh/index.html#chart-type-bar

请帮忙点个赞 :)