“This is the fifth day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

Echarts website

1. Install Echarts, version 5.0 by default

yarn add echarts

2. Define a DOM canvas container to hold the chart

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

3. Introduce Echarts in pages where we need to use it

import * as echarts from 'echarts'

4. Sub-page code

<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() }, // initialize echarts const Chart = () => {// initialize echarts const Chart = echarts.init(myref.value); Chart.setoption (props. Option) window.addeventListener ("resize", () => {// after the page size changes, Echarts also changes the size chart.resize (); }) } return { myRef, drawChart } } }; </script>Copy the code

5. Parent component code

<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({title: {LineCharts}) {text: 'system line graph'}, tooltip: {trigger: 'axis', axisPointer: {type: 'cross', label: {backgroundColor: '#6a7985'}}}, Legend: {data: [' new registration ', 'paid user ',' active user ', 'order ',' total revenue ']}, 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: 'new value', type: 'line', stack:' total value', areaStyle: {}, Emphasis: {focus: 'series'}, data: [120, 132, 101, 134, 90, 230, 210]}, {name: 'paid user ', type: 'line', stack:' total ', areaStyle: Key = 0; key = 0; key = 0; key = 0; key = 0; key = 0; key = 0; Element: {focus: 'series'} Element: [150, 232, 201, 154, 190, 330, 410] element: {name: 'order ', type: Value: [320, 332, 301, 334, 390, 330, 320]} Type: 'line', stack: 'total value ', label: {show: true, position: 'top'}, areaStyle: {}, Emphasis: {focus: 'series' }, data: [820, 932, 901, 934, 1290, 1330, 1320] } ] } }) return { ... toRefs(state) } } }) </script>Copy the code

6. The following is the display effect:

conclusion

The above is the whole content of this article, if there are incorrect places welcome to correct.

Thank you for reading. If you find it useful, please like it/forward it.