本文以Vue3代码演示 Vue2同理
中文官网: https://echarts.apache.org/zh/index.html
npm安装Echarts
npm install echarts
or
pnpm install echarts
or
yarn add echarts
创建Echarts.vue文件,代码如下
<template>
<div :id="id" :style="{ height, width }" />
</template>
<script setup>
import * as echarts from "echarts";
let myChart = ref(null);
const props = defineProps({
// 区分chart
id: {
type: String,
default: 'e-chart',
required: true
},
// echarts 画布宽高
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '300px',
},
// echarts loading
loading: {
type: Boolean,
default: true,
},
// echarts需要得 options以及其他配置
fullOptions: {
type: Object,
default: () => ({}),
required: true
},
})
//重绘图表函数
const resizeHandler = () => {
myChart.value.resize();
}
//设置防抖,保证无论拖动窗口大小,只执行一次获取浏览器宽高的方法
const debounce = (fun, delay) => {
let timer;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fun();
}, delay);
}
};
const cancalDebounce = debounce(resizeHandler, 50);
//监听图表数据时候变化,重新渲染图表
watch(() => [props.fullOptions.options, props.loading], () => {
if (!props.loading) {
myChart.value.hideLoading();
myChart.value.setOption(props.fullOptions.options, true);
nextTick(() => {
cancalDebounce()
})
}
}, { deep: true })
//页面成功渲染,开始绘制图表
onMounted(() => {
//配置为 svg 形式,预防页面缩放而出现模糊问题;图表过于复杂时建议使用 Canvas
myChart.value = echarts.init(document.getElementById(props.id), { renderer: 'svg' })
//加载图标
myChart.value.showLoading({
text: '',
color: '#409eff',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, .95)',
zlevel: 0,
lineWidth: 2,
});
if (!props.loading) {
myChart.value.hideLoading();
myChart.value.setOption(props.fullOptions.options, true);
}
//自适应不同屏幕时改变图表尺寸
window.addEventListener('resize', cancalDebounce);
})
//页面销毁前,销毁事件和实例
onBeforeUnmount(() => {
window.removeEventListener('resize', cancalDebounce)
myChart.value.dispose()
})
</script>
添加echarts得options配置文件optionsConfig.js,代码如下
export const chartOptions = {
// 推荐以setXXXOption方式命名
setDemoOption(data) {
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
let echartData = [
{
name: '安全帽佩戴报警',
value: '13'
},
{
name: '非法闯入报警',
value: '33'
},
{
name: 'C类',
value: '13'
},
{
name: 'D类',
value: '13'
}
]
let formatNumber = function (num) {
let reg = /(?=(\B)(\d{3})+$)/g
return num.toString().replace(reg, ',')
}
const option = {
color: color,
// tooltip: {
// trigger: 'item'
// },
legend: {
orient: 'vertical',
icon: 'rect',
x: '5%',
y: 'center',
itemWidth: 12,
itemHeight: 12,
align: 'left',
textStyle: {
rich: {
name: {
fontSize: 12,
color: 'rgba(255, 255, 255, 0.7)'
},
value: {
fontSize: 16,
padding: [0, 5, 0, 5],
color: 'rgba(255, 255, 255, 0.7)'
},
unit: {
fontSize: 12
}
}
},
formatter: function (name) {
let res = echartData.filter((v) => v.name === name)
res = res[0] || {}
let unit = res.unit || ''
// return '{name|' + name + '} {value|' + res.value + '}{unit|' + unit + '}'
return '{name|' + name + '} '
},
data: echartData
},
series: [
{
type: 'pie',
radius: ['20%', '40%'],
center: ['65%', '60%'],
color,
data: echartData.map((item, index) => {
return {
label: {
color: color[index]
},
...item
}
}),
hoverAnimation: false,
itemStyle: {
borderWidth: 2
},
labelLine: {
show: true,
length: 30,
length2: 60,
lineStyle: {
color: '#0080ff'
}
},
label: {
show: true,
formatter: (params) => {
return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}'
},
padding: [0, -80, 25, -100],
rich: {
icon: {
fontSize: 16
},
name: {
fontSize: 12,
padding: [0, 10, 0, 4]
},
value: {
fontSize: 12,
fontWeight: 'bold'
}
}
}
}
]
}
return option
},
}
在Vue视图中引入Echarts组件使用,代码示例如下
<ECharts id="demoEcharts" width="500px" height="500px" :full-options="echartsOptions" :loading="loading">ECharts>
//引入echarts的options配置文件optionsConfig.js
import { chartOptions } from '@/components/ECharts/optionsConfig.js'
//定义loading、echarts配置项
const loading = ref(true)
const echartsOptions = reactive({
options:{}
})
// 模拟异步
setTimeout(() => {
loading.value = false
echartsOptions.options = chartOptions.setDemoOption();
},500)
到这里就结束了,后续还会更新 前端 系列相关,还请持续关注!
感谢阅读,若有错误可以在下方评论区留言哦!!!
相关文章
图表集
在Vue2项目中使用echarts