ECharts
ECharts，全称Enterprise Charts，是一款由百度团队开发并开源，后捐赠给Apache基金会的纯JavaScript图表库。它提供了直观、生动、可交互、可个性化定制的数据可视化图表，广泛应用于数据分析、商业智能、网页开发等领域。以下是关于ECharts的详细介绍：
ECharts的特点
丰富的图表类型：ECharts支持包括折线图、柱状图、散点图、饼图、盒形图、地图、热力图、雷达图、K线图等在内的多种图表类型，满足不同的数据可视化需求。
多坐标系支持：ECharts支持直角坐标系（Cartesian）、极坐标系（Polar）和地理坐标系（Geo）等多种坐标系，为图表提供了更灵活的布局和展示方式。
高度可定制：ECharts允许用户通过丰富的配置项来自定义图表的样式、颜色、交互等，实现高度个性化的数据可视化效果。
良好的兼容性：ECharts可以流畅地运行在PC和移动设备上，并兼容当前绝大部分浏览器，如IE6/7/8/9/10/11、Chrome、Firefox、Safari等。
ECharts的使用方式
引入ECharts：用户可以通过npm、CDN或GitHub等方式引入ECharts。
准备一个DOM容器：在HTML中定义一个具有宽高的<div>容器，用于承载图表。
初始化ECharts实例：使用echarts.init(dom)方法初始化一个ECharts实例，其中dom是前面准备的DOM容器的引用。
配置图表选项：通过编写一个包含图表配置项的对象（通常称为option），来指定图表的类型、数据、样式等。
设置图表选项：使用ECharts实例的setOption(option)方法，将配置好的option应用到图表上，实现图表的渲染。
ECharts的示例
以下是一个简单的ECharts柱状图示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 示例</title> <!-- 引入 ECharts --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
vue3扩展echart封装为组件库
在Vue 3中扩展ECharts并将其封装为可复用的组件库：
封装ECharts组件
首先，你需要创建一个ECharts组件，该组件接受必要的props（如选项、宽度、高度等。
<template> <div ref="chartRef" :style="{ width, height }"></div> </template> <script setup name="chart"> import { onMounted, ref } from 'vue'; import * as echarts from 'echarts'; import { useResizeObserver, useVModel } from '@vueuse/core'; const props = defineProps({ modelValue: { type: Object, default: {}, }, height: { type: String, default: '100%', }, width: { type: String, default: '100%', }, }); const emit = defineEmits(['update:modelValue']); const data = useVModel(props, 'modelValue', emit); const chartRef = ref(); let chart = ref(); const initChart = () => { if (chartRef.value) { chart = echarts.init(chartRef.value); chart.setOption(data.value); } }; // 定义一个函数来处理尺寸变化 const handleResize = () => { if (chart) { setTimeout(() => { chart.resize(); }, 100); } }; const setOption = (option) => { if (chartRef.value) { chart = echarts.init(chartRef.value); chart.setOption(option); } }; onMounted(() => { initChart(); // 监听窗口大小变化 if (chartRef.value) { useResizeObserver(chartRef.value.parentNode, handleResize); } }); const getChart = () => { return chart; }; defineExpose({ getChart, setOption, }); </script>
组件调用
<template> <div class="container"> <div style="height: 214px" class="flex diygw-col-12"><diy-echart ref="echartRef" v-model="echartOpts" /></div> <div style="height: 214px" class="flex diygw-col-12"><diy-echart ref="echart1Ref" v-model="echart1Opts" /></div> <div class="clearfix"></div> </div> </template> <script setup name="index"> import { ElMessageBox, ElMessage } from 'element-plus'; import { ref, toRefs, reactive, onMounted, getCurrentInstance, onUnmounted } from 'vue'; import { useRouter, useRoute } from 'vue-router'; import { storeToRefs } from 'pinia'; import { useUserInfo } from '@/stores/userInfo'; import DiyEchart from '@/components/echart/index.vue'; const stores = useUserInfo(); const { userInfos } = storeToRefs(stores); const { proxy } = getCurrentInstance(); const router = useRouter(); const route = useRoute(); const globalOption = ref(route.query); const getParamData = (e, row) => { row = row || {}; let dataset = e.currentTarget ? e.currentTarget.dataset : e; if (row) { dataset = Object.assign(dataset, row); } return dataset; }; const navigateTo = (e, row) => { let dataset = getParamData(e, row); let { type } = dataset; if ((type == 'page' || type == 'inner' || type == 'href') && dataset.url) { router.push({ path: (dataset.url.startsWith('/') ? '' : '/') + dataset.url, query: dataset }); } else { ElMessage.error('待实现点击事件'); } }; const state = reactive({ userInfo: userInfos.value, echartOpts: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }] }, echart1Opts: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] } }); const { userInfo, echart1Opts, echartOpts } = toRefs(state); const init = async () => {}; // 页面加载时 onMounted(async () => { await init(); }); // 页面卸载时 onUnmounted(() => {}); </script> <style lang="scss" scoped> .container { font-size: 12px; } </style>
