1、安装

npm install echarts

2、新建echarts.js文件

这里是举例只使用柱状图和折线图两种图标，可以根据需要自行修改。

import * as echarts from "echarts/core"

import {BarChart,LineChart} from "echarts/charts";

import {
    TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent
} from "echarts/components";

import {LabelLayout,UniversalTransition} from "echarts/features";

import {CanvasRenderer} from "echarts/renderers";

echarts.use([TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,BarChart,LabelLayout,UniversalTransition,CanvasRenderer,LineChart])

export default echarts;

3、在main.js中添加：

//wanmait.com  echarts
import echarts from '@/utils/echarts'

app.config.globalProperties.$echarts = echarts

4、使用

在xxx.vue中（Vue3.0）

template中加id=xxx的标签，用来最终渲染显示统计图。

<div id="charts"></div>

const echartsInit = ()=>{
  const chartBox = echarts.init(document.getElementById("charts"));
  const option = {
    xAxis:{
      data:["0-10岁","10-20岁","20-40岁","40-60岁","60岁以上"],
    },
    yAxis:{},
    series:[
      {
        type:"bar",
        data:[10,20,5,10,50],
      }
    ]
  };
  chartBox.setOption(option);
  window.addEventListener("resize",function(){
    chartBox.resize();
  });
};

echartsInit();