如何在淘宝上接单网站建设,平面设计免费软件,做网站申请完域名后做什么,建筑施工单位网站做大屏的时候经常会遇到 echarts 展示#xff0c;下面展示在 Vue2.7 / Vue3 中对 echarts #xff08;^5.4.0#xff09; 的简单封装。
文章首发于https://blog.fxss.work/vue/echarts封装.html#xff0c;样例查看
echarts 封装使用
props 说明
参数说明类型可选值默认…做大屏的时候经常会遇到 echarts 展示下面展示在 Vue2.7 / Vue3 中对 echarts ^5.4.0 的简单封装。
文章首发于https://blog.fxss.work/vue/echarts封装.html样例查看
echarts 封装使用
props 说明
参数说明类型可选值默认值opts初始化传入的 opts https://echarts.apache.org/zh/api.html#echarts.initObject-{renderer: svg}options配置项对应 https://echarts.apache.org/zh/option.html#titleObject-{}seriesDataseries 数据配置内容https://echarts.apache.org/zh/option.html#series数据变更自动更新Array-[]intervalTime自动切换的时间跨度指自动切换 高亮 tooltip 展示例子Number-1500autoPlay是否自动播放指的是是否自动添加切换 高亮 tooltip 展示Boolean-trueisAddOn是否自动添加鼠标上移事件切换 高亮 tooltip 展示的时候鼠标再移动到其他需要高亮显示上时自动停止切换动画鼠标移开自动继续播放Boolean-true
方法
方法名说明参数echartsInstance返回 echarts 实例如果功能不满足自己定义-echartsPlayecharts开启动画对外开放可手动调用clear false, seriesIndex 0, dataIndex -1clear: 是否立即开始动画并清除上个定时器开启下个定时器默认为 falseseriesIndex: series 中的第几项数据默认为 0dataIndex: series[seriesIndex].data 中的第几项默认为 -1echartsPauseecharts关闭动画对外开放可手动调用-
使用
如下演示 echarts 封装使用
可以将如下代码拷贝到项目运行更方便查看效果
templatediv classoverflow-y-auto bg-white text-black box-border stylemax-height: calc(100% - 80px)div classflex items-start justify-between m-2div classw-1/2 overflow-x-hidden border rounded-2h1 classtext-md my-21、默认展示测试 seriesData 变更/h1button clickchangeDate1 classborder rounded-4 py-1 px-4 hover:border-blue-700切换/buttondiv classh-80echarts-module :optionsoptions1 :seriesDataseriesData1/echarts-module/div/divdiv classw-1/2 overflow-x-hidden border rounded-2 ml-2h1 classtext-md my-22、默认不展示展示的时候设置 seriesData/h1button clickchangeDate2 classborder rounded-4 py-1 px-4 hover:border-blue-700切换/buttondiv classh-80echarts-module v-ifisShow :optionsoptions2 :seriesDataseriesData2/echarts-module/div/div/divdiv classflex items-start justify-between m-2div classw-1/2 overflow-x-hidden border rounded-2h1 classtext-md my-23、前后两次赋值的 seriesData[0].data.length 不一样动画从头开始/h1button clickchangeDate3 classborder rounded-4 py-1 px-4 hover:border-blue-700切换/buttondiv classh-80echarts-module :optionsoptions3 :seriesDataseriesData3/echarts-module/div/divdiv classw-1/2 overflow-x-hidden border rounded-2 ml-2h1 classtext-md my-24、切换宽高自动 resize/h1button clickchangeDate4 classborder rounded-4 py-1 px-4 hover:border-blue-700切换宽度/buttonbutton clickchangeDate41 classborder rounded-4 py-1 px-4 ml-3 hover:border-blue-700切换高度/buttondiv classh-80div :style{ width: boxWidth4 ? 100% : 50%, height: boxHeight4 ? 100% : 75% }echarts-module :optionsoptions4 :seriesDataseriesData4/echarts-module/div/div/div/divdiv classflex items-start justify-between m-2div classw-1/2 overflow-x-hidden border rounded-2h1 classtext-md my-25、通过 ref 调用开始结束动画使用 ref 调用的好处是可以指定在第几项开始动画/h1button clickchangeDate5 classborder rounded-4 py-1 px-4 hover:border-blue-700开始动画/buttonbutton clickchangeDate51 classborder rounded-4 py-1 px-4 ml-3 hover:border-blue-700关闭动画/buttondiv classh-80echarts-module refechartsModule5 :optionsoptions5 :seriesDataseriesData5 :autoPlayfalse/echarts-module/div/divdiv classw-1/2 overflow-x-hidden border rounded-2 ml-2h1 classtext-md my-26、改变 autoPlay 开始结束动画使用 autoPlay 改变的好处是可以从上次暂停动画项处继续动画/h1button clickchangeDate6 classborder rounded-4 py-1 px-4 hover:border-blue-700{{ autoPlay6 ? 结束 : 开始 }}动画/buttondiv classh-80echarts-module refechartsModule6 :optionsoptions6 :seriesDataseriesData6 :autoPlayautoPlay6/echarts-module/div/div/divdiv classflex items-start justify-between m-2div classw-1/2 overflow-x-hidden border rounded-2h1 classtext-md my-27、切换动画跳动时间 5s - 1s/h1button clickchangeDate7 classborder rounded-4 py-1 px-4 hover:border-blue-700切换/buttondiv classh-80echarts-module :optionsoptions7 :seriesDataseriesData7 :intervalTimetimeout/echarts-module/div/divdiv classw-1/2 overflow-x-hidden border rounded-2 ml-2h1 classtext-md my-28、通过 isAddOn 添加移除鼠标事件/h1button clickchangeDate8 classborder rounded-4 py-1 px-4 hover:border-blue-700{{ isAddOn8 ? 移除 : 添加 }}/buttondiv classh-80echarts-module :optionsoptions8 :seriesDataseriesData8 :isAddOnisAddOn8/echarts-module/div/div/div/div
/templatescript setupimport { ref, reactive, nextTick } from vueimport EchartsModule from ./../components/EchartsModule.vue// 图表1const options1 reactive({legend: {},xAxis: {type: category,data: [Matcha Latte, Milk Tea, Cheese Cocoa, Walnut Brownie, Brownie, Cheese]},yAxis: {},tooltip: {trigger: axis}})const seriesData1 ref([{type: bar,name: 2015,data: [89.3, 92.1, 94.4, 85.4, 88, 90]},{type: bar,name: 2016,data: [95.8, 89.4, 91.2, 76.9, 75, 68]},{type: bar,name: 2017,data: [97.7, 83.1, 92.5, 78.1, 95, 93]}])function changeDate1() {seriesData1.value [{type: bar,name: 2015,data: [89.3, 92.1, 94.4, 85.4, 50, 69]},{type: bar,name: 2016,data: [95.8, 89.4, 91.2, 76.9, 75, 68]}]}// 图表2const isShow ref(false)const options2 reactive({legend: {},xAxis: {},yAxis: {type: category,data: [Latte, Tea, Cocoa, Brownie]},tooltip: {trigger: axis}})const seriesData2 ref([])function changeDate2() {isShow.value trueseriesData2.value [{type: bar,name: 2015,data: [89.3, 92.1, 94.4, 85.4]},{type: bar,name: 2016,data: [95.8, 89.4, 91.2, 76.9]}]}// 图表3const options3 reactive({legend: {},xAxis: {type: category,data: [Matcha Latte, Milk Tea, Cheese Cocoa, Walnut Brownie, Brownie, Cheese]},yAxis: {},tooltip: {trigger: axis}})const seriesData3 ref([{type: bar,name: 2015,data: [89.3, 92.1, 94.4, 85.4, 88, 90]},{type: bar,name: 2016,data: [95.8, 89.4, 91.2, 76.9, 75, 68]},{type: bar,name: 2017,data: [97.7, 83.1, 92.5, 78.1, 95, 93]}])function changeDate3() {seriesData3.value [{type: bar,name: 2015,data: [89.3, 92.1]}]}// 图表4const boxWidth4 ref(true)const boxHeight4 ref(true)const options4 reactive({legend: {},xAxis: {type: category,data: [Matcha Latte, Milk Tea, Cheese Cocoa, Walnut Brownie, Brownie, Cheese]},yAxis: {},tooltip: {trigger: axis}})const seriesData4 ref([{type: line,name: 2015,data: [89.3, 92.1, 94.4, 85.4, 88, 90]},{type: line,name: 2016,data: [95.8, 89.4, 91.2, 76.9, 75, 68]},{type: line,name: 2017,data: [97.7, 83.1, 92.5, 78.1, 95, 93]}])function changeDate4() {boxWidth4.value !boxWidth4.value}function changeDate41() {boxHeight4.value !boxHeight4.value}// 图表5const options5 reactive({title: {text: 饼图程序调用高亮示例,left: center},tooltip: {trigger: item,formatter: {a} br/{b} : {c} ({d}%),confine: true},legend: {orient: vertical,left: left,data: [直接访问, 邮件营销, 联盟广告, 视频广告, 搜索引擎]}})const seriesData5 ref([{name: 访问来源,type: pie,radius: 55%,center: [50%, 60%],data: [{ value: 335, name: 直接访问 },{ value: 310, name: 邮件营销 },{ value: 234, name: 联盟广告 },{ value: 135, name: 视频广告 },{ value: 1548, name: 搜索引擎 }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: rgba(0, 0, 0, 0.5)}}}])const echartsModule5 ref()function changeDate5() {echartsModule5.value.echartsPlay(true, 0, -1)}function changeDate51() {echartsModule5.value.echartsPause()}// 图表6const autoPlay6 ref(false)const options6 reactive({title: {text: 饼图程序调用高亮示例,left: center},tooltip: {trigger: item,formatter: {a} br/{b} : {c} ({d}%),confine: true},legend: {orient: vertical,left: left,data: [直接访问, 邮件营销, 联盟广告, 视频广告, 搜索引擎]}})const seriesData6 ref([{name: 访问来源,type: pie,radius: 55%,center: [50%, 60%],data: [{ value: 335, name: 直接访问 },{ value: 310, name: 邮件营销 },{ value: 234, name: 联盟广告 },{ value: 135, name: 视频广告 },{ value: 1548, name: 搜索引擎 }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: rgba(0, 0, 0, 0.5)}}}])const echartsModule6 ref()function changeDate6() {autoPlay6.value !autoPlay6.value}// 图表7const timeout ref(5000)const options7 reactive({legend: {},xAxis: {type: category,data: [Matcha Latte, Milk Tea, Cheese Cocoa, Walnut Brownie, Brownie, Cheese]},yAxis: {},tooltip: {trigger: axis}})const seriesData7 ref([{type: line,name: 2015,data: [89.3, 92.1, 94.4, 85.4, 88, 90]},{type: line,name: 2016,data: [95.8, 89.4, 91.2, 76.9, 75, 68]},{type: line,name: 2017,data: [97.7, 83.1, 92.5, 78.1, 95, 93]}])function changeDate7() {timeout.value 1000}// 图表8const isAddOn8 ref(false)const options8 reactive({legend: {},xAxis: {type: category,data: [Matcha Latte, Milk Tea, Cheese Cocoa, Walnut Brownie, Brownie, Cheese]},yAxis: {},tooltip: {trigger: axis}})const seriesData8 ref([{type: line,name: 2015,data: [89.3, 92.1, 94.4, 85.4, 88, 90]},{type: line,name: 2016,data: [95.8, 89.4, 91.2, 76.9, 75, 68]},{type: line,name: 2017,data: [97.7, 83.1, 92.5, 78.1, 95, 93]}])function changeDate8() {isAddOn8.value !isAddOn8.value}
/script代码封装
templatediv refechartsRef stylewidth: 100%; height: 100%/div
/templatescript setupimport { defineProps, defineExpose, watch, nextTick, ref, onMounted, onBeforeUnmount } from vueimport * as echarts from echartsimport { useElementSize } from vueuse/coreconst props defineProps({// https://echarts.apache.org/zh/api.html#echarts.init// 初始化传入的 optsopts: {type: Object,default() {return {renderer: svg}}},// 配置项options: {type: Object,default() {return {}}},// 数据集合seriesData: {type: Array,default() {return []}},// 自动切换的时间跨度intervalTime: {type: Number,default: 1500},// 是否自动播放autoPlay: {type: Boolean,default: true},// 是否自动添加鼠标上移事件isAddOn: {type: Boolean,default: true}})const echartsRef ref()let myChart nulllet echartsOptions {}let myChartEventTime nulllet currentSeriesIndex 0let currentDataIndex -1// 是否调用过 echartsPlaylet isEchartsPlay false// echarts初始化function init() {destroyEchart() //判断是否有echart实例如果有先销毁myChart echarts.init(echartsRef.value, null, props.opts)update()if (props.isAddOn) {addEventFn()}}// 绑定事件function addEventFn() {// 鼠标移上查看的时候暂停动画myChart.on(mouseover, series, event {// 取消之前高亮的图形myChart.dispatchAction({type: downplay,seriesIndex: currentSeriesIndex,dataIndex: currentDataIndex})echartsPause()})// 鼠标移出的时候打开动画myChart.on(mouseout, series, event {// 自动播放 或者 调用过 echartsPlayif (props.autoPlay || isEchartsPlay) echartsPlay(true, event.seriesIndex, event.dataIndex - 1)})}// 移除事件function removeEventFn() {myChart.off(mouseover)myChart.off(mouseout)}// 数据更新function update(isRefresh false) {// 逻辑处理组件options参数const options {...props.options,series: props.seriesData// other options here ...}echartsOptions options// 调用ECharts组件setOption更新nextTick(() {myChart.setOption(options, true)if (options.series.length props.autoPlay) {if (isRefresh) {echartsPlay(false, currentSeriesIndex, -1)} else {echartsPlay(false, currentSeriesIndex, currentDataIndex)}}})}// 销毁echartsfunction destroyEchart() {if (myChart) {if (props.isAddOn) {removeEventFn()}if (typeof myChart.clear function) myChart.clear()if (typeof myChart.dispose function) myChart.dispose()myChart null}}/*** echarts开启动画对外开放可手动调用* clear: 是否立即开始动画并清除上个定时器开启下个定时器默认为 false* seriesIndex: series 中的第几项数据默认为 0* dataIndex: series[seriesIndex].data 中的第几项默认为 -1*/function echartsPlay(clear false, seriesIndex 0, dataIndex -1) {if (clear) {echartsPause()}isEchartsPlay truecurrentSeriesIndex seriesIndexcurrentDataIndex dataIndexif (!myChartEventTime) {echartsEventPlay(seriesIndex)}}function echartsTimeout(seriesIndex 0) {myChartEventTime setTimeout(() {echartsEventPlay(seriesIndex)}, props.intervalTime)}function echartsEventPlay(seriesIndex 0) {const dataLen echartsOptions.series[seriesIndex].data.lengthif (myChart myChart.dispatchAction) {// 取消之前高亮的图形myChart.dispatchAction({type: downplay,seriesIndex,dataIndex: currentDataIndex})currentDataIndex (currentDataIndex 1) % dataLen// 高亮当前图形myChart.dispatchAction({type: highlight,seriesIndex,dataIndex: currentDataIndex})// 显示 tooltipmyChart.dispatchAction({type: showTip,seriesIndex,dataIndex: currentDataIndex})}echartsTimeout(seriesIndex)}// echarts关闭动画对外开放可手动调用function echartsPause() {if (myChart myChart.dispatchAction) {// 取消之前高亮的图形myChart.dispatchAction({type: downplay,seriesIndex: currentSeriesIndex,dataIndex: currentDataIndex})// 取消显示 tooltipmyChart.dispatchAction({type: hideTip})}if (myChartEventTime) {clearTimeout(myChartEventTime)myChartEventTime null}}// 重置大小function echartsResize() {if (myChart) myChart.resize()}onMounted(() {init()})onBeforeUnmount(() {echartsPause()destroyEchart()})watch(() props.seriesData,(val, oldVal) {let isRefresh false// 前后两次赋值的 seriesData[0].data.length 不一样动画从头开始if (val.length 0 val[currentSeriesIndex].data oldVal.length 0 oldVal[currentSeriesIndex].data val[currentSeriesIndex].data.length ! oldVal[currentSeriesIndex].data.length) {isRefresh true}update(isRefresh)},{ deep: true })// 监听 props.autoPlay 自动关闭、继续动画watch(() props.autoPlay,val {if (val) {echartsPlay(false, currentSeriesIndex, currentDataIndex)} else {echartsPause()}})// 监听 props.isAddOn 自动添加、移除事件watch(() props.isAddOn,val {if (val) {addEventFn()} else {removeEventFn()}})// 父元素大小改变的时候自动 resiezeconst { width, height } useElementSize(echartsRef)watch(() width.value,val {nextTick(() {echartsResize()})})watch(() height.value,val {nextTick(() {echartsResize()})})defineExpose({echartsInstance: () myChart,echartsPlay,echartsPause})
/script
