Vue3.0使用echarts

「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」。

echarts官网

1、安装echarts，默认安装的是5.0版本

yarn add echarts

2、定义DOM画布容器来存放图表

<div id="myChart" :style="{ width: '100%', height: '300px' }"></div>

3、在我们需要使用echarts的页面引入echarts

import * as echarts from 'echarts'

4、子页面代码

<template>
  <div>
    <div ref="myRef" :style="{ width: '100%', height: '300px' }"></div>
  </div>
</template>
 
<script lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from "echarts";
export default {
  props: {
    option: Object
  },
  setup(props) {
    const myRef = ref<any>(null)
    
    onMounted(() => {
      setTimeout(() => {
        drawChart()
      }, 20)
    })

    // 绘制折线图
    const drawChart = () => {
      // 初始化echarts实例
      const Chart = echarts.init(myRef.value);
      // 父组件传来的实例参数
      Chart.setOption(props.option)
      window.addEventListener("resize", () => {
        //页面大小变化后Echarts也更改大小
        Chart.resize();
      })
    }
    return {
      myRef,
      drawChart
    }
  }
};
</script>

5、父组件代码

<template>
  <div>
    <LineCharts :option="option"/>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';
import LineCharts from '../../components/echarts/line-charts.vue';
export default ({
  components: {
    LineCharts
  },
  setup() {
    const state = reactive({
      // 自定义图表的配置项和数据
      option: {
        title: {
          text: '系统折线图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['新增注册', '付费用户', '活跃用户', '订单数', '当日总收入']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['2021-03-11', '2021-03-12', '2021-03-13', '2021-03-14', '2021-03-15', '2021-03-16', '2021-03-17']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '新增注册',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '付费用户',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '活跃用户',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '订单数',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '当日总收入',
            type: 'line',
            stack: '总量',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    })

    return {
      ...toRefs(state)
    }
  }
})
</script>

6、下面是展示效果：

结语

以上就是本文章的全部内容了，如果有不正确的地方欢迎指正。

感谢您的阅读，如果感觉有用不妨点赞/转发。