网站开发中应注意哪些问题,应用商店正版下载安装,网站视差怎么做,如何做网站与网页ECharts
ECharts#xff0c;全称Enterprise Charts#xff0c;是一款由百度团队开发并开源#xff0c;后捐赠给Apache基金会的纯JavaScript图表库。它提供了直观、生动、可交互、可个性化定制的数据可视化图表#xff0c;广泛应用于数据分析、商业智能、网页开发等领域。以…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 charsetutf-8 titleECharts 示例/title !-- 引入 ECharts -- script srchttps://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js/script
/head
body !-- 准备一个具备大小宽高的Dom -- div idmain stylewidth: 600px;height:400px;/div script typetext/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如选项、宽度、高度等。
templatediv refchartRef :style{ width, height }/div
/templatescript setup namechart
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组件调用 templatediv classcontainerdiv styleheight: 214px classflex diygw-col-12diy-echart refechartRef v-modelechartOpts //divdiv styleheight: 214px classflex diygw-col-12diy-echart refechart1Ref v-modelechart1Opts //divdiv classclearfix/div/div
/templatescript setup nameindeximport { 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(() {});
/scriptstyle langscss scoped.container {font-size: 12px;}
/style
