最近更新
已经配信了npm包，用来换肤的，直接安装就行，详情点击下面的链接使用
安装
补充下,element-resize-detector这个包是用来监听容器宽高变化的
npm i echarts element-resize-detector
构建公共组件
因为太麻烦,所以抽出来写一个公共组件好了,在components里面建一个组件
1. vue
这里传几个参数,id用来确认echarts的,width,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"/>
2. css
一定要使用100%, 100%,不然铺不满整个div
.echarts-box
width 100%
height 100%
3. js
divListen这个函数是用来监听div变换后自适应刷新echarts,echarts自带主题变色theme,黑和白,默认是white,黑是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) {
/// 声明定义一下echart
const echart = echarts;
// 定义变量存储echarts对象
let docEcharts = ref();
onMounted(() => {
initChart();
});
onUnmounted(() => {
echart.dispose;
});
// 基础配置一下Echarts
// nextTick是为了让dom渲染后再执行echats
const initChart = () => {
nextTick(() => {
const chart = echart.init(document.getElementById(props.echartsId), props.theme);
docEcharts.value = chart
divListen(props.echartsId, chart, this)
// 把配置和数据放这里
chart && chart.clear();
props.options && chart.setOption(props.options, true);
// 监听数据变化后重置数据
watch(props.options,
() => {
chart && chart.clear();
props.options && chart.setOption(props.options, true)
}
)
})
}
return {
docEcharts
}
},
methods: {},
};
4. 配置监听函数
因为listenTo监听后,1px变化都会执行一个resize,这个防抖函数是为了限制echarts刷新的,当div结束变动后再执行resize
//防抖
export function debounce (fn, t = 100) {
let lastTime;
return function () {
clearTimeout (lastTime);
const [that, args] = [this, arguments];
lastTime = setTimeout (() => {
fn.apply (that, args);
}, t);
}
}
/*
* 监听div
*/
export function divListen (div, chart) {
// let that = this
return new Promise(() => {
let erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById(div), debounce(async () => {
chart && chart.resize();
}));
})
}
使用echarts组件
组件父级最好包一个div,用来确认宽高
<template>
<div class="test">
<echarts-box :echartsId="'curveEcharts'"
:eWidth="'100%'"
:eHeight="'100%'"
:theme="themeFlag"
:lineColor="lineColor"
:options="eOptionsCurve">
</echarts-box>
</div>
</template>
到这里就结束了
