官网

https://echarts.apache.org/zh/index.html

安装使用

# 安装
npm i echarts

# 组件使用时引入
import * as echarts from 'echarts'

使用方式

// 放在DOM加载完成后
onMounted(() => {
  // 解决路由跳转不显示问题
  echarts.dispose(document.getElementById('main1'))
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById('main1'));

  // 绘制图表
  myChart.setOption({
    title: {
      text: '报告来源'
    },
    tooltip: {},
    xAxis: {
      data: ['国家\n\n机关', '村居\n\n两委', '教育类\n\n从业者', '医疗类\n\n从业者', '旅馆类\n\n从业者', '其他行\n\n业从业者'],
    },
    yAxis: [{
      type: 'value',
      //去掉背景区域
      splitArea: {
        show: false
      },
      // 去除背景线
      splitLine: {
        show: false
      },
      axisLine: { //设置y轴坐标线的样式
        lineStyle: {
          type: 'solid',
          color: '#b8c2c1', //y轴坐标线的颜色
          width: '1' //y轴坐标线的宽度
        }
      },
    }],
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
})