前端代码：

先按照echarts插件。

在页面里引用
import * as echarts from "echarts";

设置div
<div style="width:100%;height:250px;margin-top: 4px;"  id="addressChart"></div>

方法:
addressEcharts() {
        const option = {
          grid: {
            left: '2%',
            right: '2%',
            bottom: '10%',
            containLabel: true
          },
          title: {
            text: '用户所在地理区域分布柱状图',
            textStyle:{
              fontSize:10,
              fontWeight:'300'
            },
          },
          xAxis: {
            data: ['浙江','上海']
          },

          yAxis: {
            type: "value",
            name: "单位(个)",
            nameTextStyle: {
              color: "#aaa",
              nameLocation: "start",
            },
          },
          legend: {
            data: ['软件企业', '设计企业', '检测企业'],
            top: '0%'
          },
          series: [{
            data: [0,1],
            type: "bar",
            smooth: true,
            name: '软件企业',
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top"
            }
          },
          {
            data: [2,3],
            type: "bar",
            smooth: true,
            name: '设计企业',
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top"
            }
          },{
            data: [4,5],
            type: "bar",
            smooth: true,
            name: '检测企业',
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top"
            }
          }]
        };
        this.addressChart = echarts.init(document.getElementById("addressChart"));
        this.addressChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          this.addressChart.resize();
        });
    },

如图：

其他图形的画图可参考echarts官网