在Vue3中使用echarts

在项目中经常需要使用一些折线图、柱状图、饼状图等等，统计相关的组件当然是echarts无疑了

• 安装

npm install echarts -S

• 应用

在入口文件App.vue中定义（vue3 setup）

<template>
  <div id="app">
    <component :is="layout">
      <router-view></router-view>
    </component>
  </div>
</template>


<script>
import * as echarts from 'echarts'
import { provide } from 'vue'
import DefaultLayout from './layout/Layout';
import MainLayout from './layout/MainLayout';
import EmptyLayout from './layout/EmptyLayout';
export default {
  name: 'app',
  components:{
    'default-layout':DefaultLayout,
    'main-layout':MainLayout,
    'empty-layout':EmptyLayout
  },
  setup(){
    provide('ec',echarts)//provide
  },
  data () {
    return {
      visible: false,
      default_layout:'empty'
    }
  },
  computed: {
    layout(){
      console.log(this.$route.meta.layout)
      return (this.$route.meta.layout || this.default_layout) + '-layout'
    }
  }
};
</script>

<style>
body {
  font-size: 16px;
  background-color: #f8f8f8;
  -webkit-font-smoothing: antialiased;
}
</style>

在需要的页面引入

setup(){
	let echarts = inject("ec");//引入
}

• 具体实例

<script>
import {inject, onMounted, reactive, toRefs} from "vue";
import {getHomeStats} from "../../api/home";

export default {
  name: "index",
  setup(){
    const state =reactive({
      po_pending_sum:0,
        send_pending_sum:0,
        allot_pending_sum:0,
        today:{
          stock_sub_sum:0,
          stock_into_sum:0
        },
        month:{
          stock_sub_sum:0,
          stock_into_sum:0
        },
        stat_7day:{
          entry:[],
          delivery:[]
        },
        stat_year:{
          entry:[],
          delivery:[]
        }
    })
    let echarts = inject("ec");//引入

    const getHomeData = ()=>{
        getHomeStats({}).then((res)=>{
            let data = res.Data||{};
            state.allot_pending_sum = data.allot_pending_sum;
            state.po_pending_sum = data.po_pending_sum;
            state.send_pending_sum = data.send_pending_sum;

            state.month = data.month;
            state.today = data.today;

            state.stat_7day = data.stat_7day;
            state.stat_year = data.stat_year;
        })
    }
    getHomeData();
    const loadChart = () =>{
      let myChart = echarts.init(document.getElementById("customerChartId"));
      let myChartByPe = echarts.init(document.getElementById("customerChartIdByYear"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['入库数量', '出库数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: state.stat_7day.entry[0]
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '入库数量',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#83bff6'},
                  {offset: 0.5, color: '#188df0'},
                  {offset: 1, color: '#188df0'}
                ]
            )
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#2378f7'},
                    {offset: 0.7, color: '#2378f7'},
                    {offset: 1, color: '#83bff6'}
                  ]
              )
            }
          },
          data: state.stat_7day.entry[1],
          type: 'line',
          smooth: true
        },{
          name: '出库数量',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#eeb6ca'},
                  {offset: 0.5, color: 'rgb(227,105,141)'},
                  {offset: 1, color: '#ee2a78'}
                ]
            )
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#ee2a78'},
                    {offset: 0.7, color: 'rgb(227,105,141)'},
                    {offset: 1, color: '#eeb6ca'}
                  ]
              )
            }
          },
          data: state.stat_7day.delivery[1],
          type: 'line',
          smooth: true
        }]
      });
      // 绘制图表
      myChartByPe.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['入库数量', '出库数量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '入库数量',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#83bff6'},
                  {offset: 0.5, color: '#188df0'},
                  {offset: 1, color: '#188df0'}
                ]
            )
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#2378f7'},
                    {offset: 0.7, color: '#2378f7'},
                    {offset: 1, color: '#83bff6'}
                  ]
              )
            }
          },
          data: state.stat_year.entry,
          type: 'line',
          smooth: true
        },{
          name: '出库数量',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#eeb6ca'},
                  {offset: 0.5, color: 'rgb(227,105,141)'},
                  {offset: 1, color: '#ee2a78'}
                ]
            )
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#ee2a78'},
                    {offset: 0.7, color: 'rgb(227,105,141)'},
                    {offset: 1, color: '#eeb6ca'}
                  ]
              )
            }
          },
          data: state.stat_year.delivery,
          type: 'line',
          smooth: true
        }]
      });
      window.onresize = function () {//自适应大小
        myChart.resize();
        myChartByPe.resize();
      };
    }
    onMounted(() => {
      setTimeout(function (){
        loadChart()
      },900)
    });
    return {
      ...toRefs(state)
    }
  }
}
</script>