echarts组件化及使用hook进行resize
hook 本质是一个函数,把setup函数中使用的 Composition API 进行了封装
组件化echarts实例
<template> <div ref="echart" :></div> </template> <script setup> import * as echarts from "echarts"; import useResize from "@/hooks/useResize"; // hook 代码见下方 const { proxy } = getCurrentInstance(); // 获取实例中的proxy let echart; let echartInstance; const props = defineProps({ // 数据 data: { type: Array, default: [ { value: 40, name: "rose 1" }, { value: 38, name: "rose 2" }, { value: 32, name: "rose 3" }, ], }, // 高度 height: { type: [Number, String], default: "300px", }, // 宽度 width: { type: [Number, String], default: "100%", }, }); const { data } = toRefs(props); const data1 = reactive({ option: { legend: { top: "bottom", }, toolbox: { show: false, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true }, }, }, tooltip: { trigger: "item", formatter: "{b} : {c} ({d}%)", }, series: [ { name: "Nightingale Chart", type: "pie", radius: [10, 120], center: ["50%", "45%"], roseType: "area", itemStyle: { borderRadius: 8, }, data: data.value, }, ], }, }); const { option } = toRefs(data1); // 观察 data ,重新绘制 watch( data, (newValue) => { option.value.series[0].data = newValue; }, { deep: true } ); watch( option, (newValue) => { echartInstance.setOption(newValue, true); }, { deep: true } ); onMounted(() => { echart = proxy.$refs.echart; // 获取的DOM根节点 echartInstance = echarts.init(echart, "macarons"); // 初始化 echart echartInstance.setOption(option.value, true); // 绘制 // notMerge 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则,详见 组件合并模式。如果为 true,表示所有组件都会被删除,然后根据新 option 创建所有新组件。 // setOption 见 https://echarts.apache.org/zh/api.html#echartsInstance.setOption }); function resize() { echartInstance.resize(); } // 暴露函数 (供hook调用) defineExpose({ resize, }); useResize(); </script>
登录后复制
hook (useResize)
export default function () { let proxy onMounted(() => { proxy = getCurrentInstance(); // 获取实例中的proxy window.addEventListener('resize', resize) }) onBeforeUnmount(() => { window.removeEventListener('resize', resize) }) function resize() { proxy.exposed.resize() } }
登录后复制
使用echarts和echarts自适应
首先安装echarts,这个就不介绍了,直接说怎么使用.
<!-- 创建一个div去显示echarts --> <div ref="main" ></div>
登录后复制
import {ref, provide, inject, onMounted, reactive} from "vue"; import * as echarts from "echarts"; const main = ref() // 使用ref创建虚拟DOM引用,使用时用main.value onMounted( () => { init() } ) function init() { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(main.value); // 指定图表的配置项和数据 var option = { /*title: { text: 'ECharts 入门示例' },*/ tooltip: {}, // color:['#779ffe','#a07dfe','#fc9b2e','#63f949','#fb6464','#fce481'], /*grid: { left: '30%', right: '4%', bottom: '3%', containLabel: true },*/ legend: { // data: ['国家类型','非国家类型','个人','法人','可公式','非公式'] }, xAxis: { type: 'category', data: ['国家类型','非国家类型','个人','法人','可公式','非公式'] }, yAxis: { type: 'value', scale: true, max: 150, min: 0, splitNumber: 3, }, series: [ { data: [ { value: 120, itemStyle: { color: '#7fa6fe' } }, { value: 90, itemStyle: { color: '#a17fff' } }, { value: 40, itemStyle: { color: '#fda630' } }, { value: 120, itemStyle: { color: '#93fc73' } }, { value: 120, itemStyle: { color: '#fb6666' } }, { value: 120, itemStyle: { color: '#fbe068' } } ], type: 'bar' } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }
登录后复制
以上就是Vue3 echarts组件化及使用hook进行resize的方法是什么的详细内容,更多请关注Work网其它相关文章!