网上的复制粘贴太多,大佬也太多,写个东西反正就是我自己记录的,你看不看得懂没关系
我真的吐了,自己记录请不要公开
我是永远的萌新,各种这样不会那也不会,看那种一半的作业看的真血压高
<template>
<div class="my-chart-page-box">
<div class="char-box" :id='chartName'></div>
</div>
</template>
<script>
// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表,图表后缀都为 Chart
import {
//这个是折线图
LineChart
} from 'echarts/charts';
// 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
LegendComponent,
TransformComponent,
DataZoomComponent
} from 'echarts/components';
// 标签自动布局,全局过渡动画等特性
import {
LabelLayout,
UniversalTransition
} from 'echarts/features';
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
CanvasRenderer
} from 'echarts/renderers';
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
LegendComponent,
TransformComponent,
LineChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
DataZoomComponent
]);
import {
reactive,
toRefs,
onMounted,
onUnmounted,
watch
} from "vue";
export default {
name: 'chart',
props: {
chartName: String,
chartData: Object,
},
setup(props) {
const dataMap = reactive({
chartName: props.chartName,
chartData: props.chartData,
option: {},
})
// 基础数据
const chartPrepare = () => {
console.log(dataMap.chartData);
//图表的id父级传过来 防止一个页面多个图不绘制,还能防止vue3.x 还有打包之后初始化不绘制的问题 原理我也不知道 有大佬告知一下最好
dataMap.myChart = echarts.init(document.getElementById(dataMap.chartName));
// 绘制图表需要的数据
dataMap.option = {
xAxis: {
type: 'category',
boundaryGap: false,
},
yAxis: {
type: 'value'
},
series: [{
data: dataMap.chartData,
type: 'line'
}]
}
}
// 绘制图表
const chartOpen = () => {
// 这个true可以看官方文档
dataMap.myChart.setOption(dataMap.option, true);
// window.onresize = function() { // 自适应大小
// 这个自适应大小我反正疯狂报错,应该是resize() 是一个需要配置的还是什么的玩意 搞不明白暂时不用了
// dataMap.myChart.resize();
// };
}
onMounted(() => {
// 基础数据
chartPrepare()
// 绘制图表
chartOpen()
});
watch(() => props.chartData,
(count, prevCount) => {
// 监听数据变了 就重新绘制一遍 也就是大佬们说的 "切记,数据变化后需要再次调init方法刷线图表"
// 绘制图表
chartOpen()
console.log(count, prevCount);
}, {
deep: true
}
)
onUnmounted(() => {
//销毁
echarts.dispose(dataMap.myChart);
dataMap.myChart = null;
})
return {
...toRefs(dataMap),
}
}
}
</script>
<style lang="less" scoped>
.my-chart-page-box {
width: 100%;
height: 100%;
>.char-box {
width: 100%;
height: 100%;
}
}
</style>
我写的不敢保证全部小白看懂,但是我会尽量让更多的人看懂,而不是我就自己记录一下,你爱看得懂就看,看不懂就拉倒
我最烦的一句话就是,你复制就好
先不说授人与鱼不如授人与渔,复制能用的都少之极少