The installation

The element-resize detector package is used to monitor container width and height changes

npm i echarts element-resize-detector
Copy the code

Building common Components

Because it’s too much work, so I’ll pull it out and write a public component, and create a component inside components

1. vue

I’m going to pass a couple of parameters,id, to make sure that the width and height of the echarts is the width and height

<template>
  <div class="echarts-box">
    <div :id="echartsId" :style="{ width: eWidth, height: eHeight }"></div>
  </div>
</template>

<script src="./control.js"></script>

<style scoped lang="stylus" src="./style.styl"/>
Copy the code

2. css

Make sure you use 100%, 100%, or you won’t be able to spread the entire div

.echarts-box
  width 100%
  height 100%
Copy the code

3. js

The divListen function is used to automatically refresh echarts after listening for div changes. Echarts has its own color changing theme, black and white. The default is white and black is dark

import * as echarts from "echarts"; import { watch, ref, nextTick } from 'vue' import { onMounted, onUnmounted } from "@vue/runtime-core"; import {divListen} from ".. /.. /utils/common"; export default { name: "echartsBox", data () { return { echart: {}, chartDocument: {} }; }, watch: {}, computed: {}, props: [ 'echartsId', 'eWidth', 'eHeight', 'theme', 'options', ], components: {}, setup(props) {// const echart = echarts; // define a variable to store echarts object let docEcharts = ref(); onMounted(() => { initChart(); }); onUnmounted(() => { echart.dispose; }); // Echats const initChart = () => {nextTick() => {const chart = echart.init(document.getElementById(props.echartsId), props.theme); Docecharts.value = props. EchartsId, chart, this) // props.options && chart.setOption(props.options, true); // Reset data_props (props. Options, () => {chart && chart. Clear (); props.options && chart.setOption(props.options, true) } ) }) } return { docEcharts } }, methods: {}, };Copy the code

4. Configure the listening function

After listenTo,1px changes are performed with a resize function. This function is used to limit the refresh of echarts. Resize is performed after div changes are completed

Export function debounce (fn, t = 100) {let lastTime; return function () { clearTimeout (lastTime); const [that, args] = [this, arguments]; lastTime = setTimeout (() => { fn.apply (that, args); }, t); }}Copy the code
/* * export function divListen (div, chart) { // let that = this return new Promise(() => { let erd = elementResizeDetectorMaker(); erd.listenTo(document.getElementById(div), debounce(async () => { chart && chart.resize(); })); })}Copy the code

Use echarts components

The parent of the component should include a div to identify the width and height

<template>
<div class="test">
    <echarts-box :echartsId="'curveEcharts'"
              :eWidth="'100%'"
              :eHeight="'100%'"
              :theme="themeFlag"
              :lineColor="lineColor"
              :options="eOptionsCurve">
    </echarts-box>
  </div>
</template>

Copy the code

And that’s the end of it

reference

VUE 3.0 using echarts5.1.1, click legend error

5 minutes to get started with ECharts