Echarts vue3的引入与使用

• 下载依赖

npm i --save echarts

• 在需要使用echarts页面引用

import * as echarts from 'echarts';

• 在onMounted生命周期进行初始化并且设置属性

const myChart = echarts.init(echartLine.value)
        // 绘制图表
myChart.setOption({
          title: {
            text: '订单量趋势',
            textStyle: {
              fontSize: 16
            },
            left: 30
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            data: userEchrats.value.xAxis
          },
          legend: {
            data: userEchrats.value.legend
          },
          yAxis: {
            type: 'value'
          },
          // label: {
          //   show: true
          // },
          series: [
            {
              type: 'bar',
              name: userEchrats.value.legend[0],
              showBackground: false,
              data: userEchrats.value.series[0].data
            },
            {
              type: 'bar',
              name: userEchrats.value.legend[1],
              showBackground: false,
              data: userEchrats.value.series[1].data
            }
          ]
        })
        window.onresize = function () { // 自适应大小
          myChart.resize()
        }

• title:控制显示的标题,值是text,修改样式使用textStyle;
• legend:显示的选项,data值是字符串数组;
• 如果legend数量大于一个,需要切换显示时,series的值应该是多个对象