Vue + Echarts(v5.版本)的简单组件封装（折线图、柱状图、散点图、饼/环形图、仪表盘、雷达图）

项目中展示图表的地方很多，不想每次都写一长串的 options配置，就整合了一下常用的配置项，简单封装了一下，也能保证整个系统的图表风格统一，需要调整样式的时候也不用改很多地方

2022-11-07：legendData 改为数组，以支持多 legend的场景；添加 dataZoom组件

一、效果图（数据不足，示例图可能比较秃）


折线图		柱状图
散点图		饼图
环形图		嵌套环形图
仪表盘		雷达图

二、代码

文件目录结构

* mixin文件：Chart.js

/*echarts组件封装id:元素id ，唯一chartStyle:容器样式colors:颜色legendData:图例seriesData:所需数据xData:X轴显示的数据yData:Y轴显示的数据
*/
export default {props: {// 此处id切记不可传重复id: {type: String,default: '',},// 样式chartStyle: {type: Object,default: () => {},},// 标题titleData: {type: Object,default: () => {},},// 副标题subtitleData: {type: Object,default: () => {},},// 网格gridData: {type: Object,default: () => {},},// 颜色colors: {type: Array,default: () => [],},// 提示框tooltipData: {type: Object,default: () => {},},// 图例legendData: {type: Array,default: () => [],},// seriesseriesData: {type: Array,default: () => [],},// x 轴xData: {type: Array,default: () => [],},// x 轴样式xStyle: {type: Object,default: () => {},},// y 轴yData: {type: Array,default: () => [],},// 缩放dataZoomData: {type: Array,default: () => [],},// 是否有点击事件clickable: {type: Boolean,default: false,},},data() {return {chartsDom: null,option: null,resizeTimer: null,tooltipConfig: {backgroundColor: 'rgba(0, 0, 0, 0.7)',borderColor: '#333',// borderRadius: 10,borderWidth: 0,shadow: false,textStyle: {color: '#FFFFFF',fontSize: 12,},},};},watch: {// 监听 series变化seriesData: {handler(newVal) {if (newVal) {this.$nextTick(() => {if (this.chartsDom) {// 先销毁，释放内存this.chartsDom.dispose();}this.init();});}},deep: true, // 对象内部属性的监听，关键。},},mounted() {// 部分暂时隐藏的 chart图，在显示的时候监听不到 seriesData的变化，需由 mounted来调用this.$nextTick(() => {if (this.chartsDom) {// 先销毁，释放内存this.chartsDom.dispose();}this.init();});window.addEventListener('resize', this.resize);},beforeDestroy() {// 解除监听window.removeEventListener('resize', this.resize);// 销毁 echart实例if (this.chartsDom) {this.chartsDom.dispose();}},methods: {// 尺寸变化自适应resize() {if (this.resizeTimer) { clearTimeout(this.resizeTimer); }this.resizeTimer = setTimeout(() => { this.chartsDom.resize(); }, 200);},},
};

>> 折线图：LineChart.vue

<template><div :id="id" :style="chartStyle"></div>
</template><script>
import Chart from './mixins/Chart';export default {mixins: [Chart],props: {},data() {return {};},methods: {init() {this.chartsDom = this.$echarts.init(document.getElementById(this.id));// 每次数据更新都清空一次实例，以便页面重新渲染，否则更新数据没有变化，页面看起来像没动document.getElementById(this.id).removeAttribute('_echarts_instance_');this.option = {grid: {left: 0,right: 20, // 设置 0的话最后一个x轴标签会被截断top: 35',bottom: (this.dataZoomData && this.dataZoomData.length) ? 50 : 0,containLabel: true,...this.gridData,},tooltip: {trigger: 'axis',...this.tooltipConfig,...this.tooltipData,},legend: this.legendData.map((v) => ({top: 0,right: 0,icon: 'rect',itemWidth: 8,itemHeight: 8,itemGap: 12,textStyle: {fontSize: 12,color: '#455A74',},...v,})),dataZoom: [...this.dataZoomData],color: this.colors,xAxis: [{type: 'category',boundaryGap: false,axisTick: { // 刻度点lineStyle: {color: 'rgba(45, 62, 83, 0.45)',},},data: this.xData,axisLabel: {interval: 'auto',rotate: 0, // 旋转角度margin: 12, // 标签文字到轴的距离align: 'center',lineHeight: 17,color: '#455A74',},axisLine: {lineStyle: {color: 'rgba(45, 62, 83, 0.45)',},},...this.xStyle,},],yAxis: this.yData.length === 0 ? [] : this.yData.map((item) => ({type: 'value',nameTextStyle: {color: '#455A74',align: 'left',},// min: 'dataMin',splitLine: {show: true,lineStyle: {color: 'rgba(45, 62, 83, 0.15)',type: 'dashed',},},axisLine: {show: false,},axisTick: false,axisLabel: {color: '#455A74',// margin: 12,},...item,})),series: this.seriesData.map((item, index) => ({type: 'line',showSymbol: false,areaStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: this.getColorStopsByColor(this.colors[index]),global: false, // 缺省为 false},},...item,})),};this.chartsDom.setOption(this.option);// 绑定点击事件this.chartsDom.on('click', (param) => {this.$emit('chartClick', param);});},getColorStopsByColor(color) {let color0;let color1;switch (color) {case '#169BFA':color0 = 'rgba(22, 155, 250, 0.3)';color1 = 'rgba(22, 155, 250, 0)';break;case '#31CF9A':color0 = 'rgba(49, 207, 154, 0.3)';color1 = 'rgba(49, 207, 154, 0)';break;case '#FBAD3B':color0 = 'rgba(251, 173, 59, 0.3)';color1 = 'rgba(251, 173, 59, 0)';break;default:color0 = 'rgba(255, 255, 255, 0)';color1 = 'rgba(255, 255, 255, 0)';break;}const colorStops = [{offset: 0, color: color0, // 0% 处的颜色}, {offset: 1, color: color1, // 100% 处的颜色}];return colorStops;},},
};
</script>

【使用示例】

<template><LineChart id="myLine" v-bind="myLine" />
</template><script>
import LineChart from '@/components/Charts/LineChart';export default {components: { LineChart },data() {return {myLine: {chartStyle: {height: '220px',},colors: ['#169BFA', '#FBAD3B', '#31CF9A'],legendData: [{ data: ['line1', 'line2', 'line3'] }],xData: ['2022-07-01 10:00', '2022-07-01 10:30', '2022-07-01 11:00', '2022-07-01 11:30'],xStyle: {axisLabel: {formatter: (params) => params.substr(5),},},yData: [{ name: '单位：xx' }],seriesData: [{ name: 'line1', data: [20, 50, 70, 100] },{ name: 'line2', data: [30, 60, 90, 40] },{ name: 'line3', data: [80, 40, 70, 20] },],},};},
</script>

>> 柱状图：BarChart.vue（其实这里的柱状图和折线图都是二维坐标图，很多配置都是相似的，可以合并）

<template><div :id="id" :style="chartStyle"></div>
</template><script>
import Chart from './mixins/Chart';export default {mixins: [Chart],props: {},data() {return {};},methods: {init() {this.chartsDom = this.$echarts.init(document.getElementById(this.id));// 每次数据更新都清空一次实例，以便页面重新渲染，否则更新数据没有变化，页面看起来像没动document.getElementById(this.id).removeAttribute('_echarts_instance_');this.option = {grid: {left: 0,right: 20,top: 35,bottom: (this.dataZoomData && this.dataZoomData.length) ? 50 : 0,containLabel: true,...this.gridData,},tooltip: {trigger: 'axis',...this.tooltipConfig,...this.tooltipData,},legend: this.legendData.map((v) => ({top: 0,right: 0,icon: 'rect',itemWidth: 8,itemHeight: 8,itemGap: 12,textStyle: {fontSize: 12,color: '#455A74',},...v,})),dataZoom: [...this.dataZoomData],color: this.colors,xAxis: [{type: 'category',boundaryGap: true,axisTick: { // 刻度点lineStyle: {color: 'rgba(45, 62, 83, 0.45)',},},data: this.xData,axisLabel: {interval: 'auto',rotate: 0, // 旋转角度margin: 12, // 标签文字到轴的距离align: 'center',lineHeight: 17,color: '#455A74',},axisLine: {lineStyle: {color: 'rgba(45, 62, 83, 0.45)',},},...this.xStyle,},],yAxis: this.yData.length === 0 ? [] : this.yData.map((item) => ({type: 'value',nameTextStyle: {color: '#455A74',},splitLine: {show: true,lineStyle: {color: 'rgba(45, 62, 83, 0.15)',type: 'dashed',},},axisLine: {show: false,},axisTick: false,axisLabel: {color: '#455A74',// margin: 12,},...item,})),series: this.seriesData.map((item) => ({barWidth: 16,type: 'bar',...item,})),};this.chartsDom.setOption(this.option);// 绑定点击事件this.chartsDom.on('click', (param) => {this.$emit('chartClick', param);});},},
};
</script>

【使用示例】
（与折线图类似）

>> 散点图：ScatterChart.vue（其实与折线图、柱状图的配置差不多，只是数据格式略有差异）

<template><div :id="id" :style="chartStyle"></div>
</template><script>
import Chart from './mixins/Chart';export default {mixins: [Chart],props: {},data() {return {};},methods: {init() {this.chartsDom = this.$echarts.init(document.getElementById(this.id));// 每次数据更新都清空一次实例，以便页面重新渲染，否则更新数据没有变化，页面看起来像没动document.getElementById(this.id).removeAttribute('_echarts_instance_');this.option = {grid: {left: 0,right: 80, // 设置 0的话最后一个x轴标签会被截断top: 35,bottom: 0,containLabel: true,...this.gridData,},tooltip: {trigger: 'axis',...this.tooltipConfig,...this.tooltipData,},legend: this.legendData.map((v) => ({top: 0,right: 0,icon: 'rect',itemWidth: 8,itemHeight: 8,itemGap: 12,textStyle: {fontSize: 12,color: '#455A74',},...v,})),color: this.colors,xAxis: [{type: 'value',min: 'dataMin',boundaryGap: false,axisTick: { // 刻度点lineStyle: {color: 'rgba(45, 62, 83, 0.45)',},},axisLabel: {interval: 'auto',rotate: 0, // 旋转角度margin: 12, // 标签文字到轴的距离align: 'center',lineHeight: 17,color: '#455A74',},axisLine: {lineStyle: {color: 'rgba(45, 62, 83, 0.45)',},},...this.xStyle,},],yAxis: this.yData.length === 0 ? [] : this.yData.map((item) => ({type: 'value',min: 'dataMin',nameTextStyle: {color: '#455A74',align: 'left',},splitLine: {show: true,lineStyle: {color: 'rgba(45, 62, 83, 0.15)',type: 'dashed',},},axisLine: {show: false,},axisTick: false,axisLabel: {color: '#455A74',},...item,})),series: this.seriesData.map((item, index) => ({type: 'scatter',...item,})),};this.chartsDom.setOption(this.option);// 绑定点击事件this.chartsDom.on('click', (param) => {this.$emit('chartClick', param);});},},
};
</script>

【使用示例】

<template><ScatterChart id="myScatter" v-bind="myScatter" />
</template><script>
import ScatterChart from '@/components/Charts/ScatterChart';export default {components: { ScatterChart },data() {return {myScatter: {chartStyle: {height: '220px',},colors: ['#169BFA', '#31CF9A'],legendData: [{ data: ['scatter1', 'scatte2'] }],xStyle: { name: '单位：xx' },yData: [{ name: '单位：yy' }],seriesData: [{name: 'scatter1',data: [[174, 65.6],[175.3, 71.8],[193.5, 80.7],[186.5, 72.6],[187.2, 78.8],[181.5, 74.8],[184, 86.4],[184.5, 78.4],[175, 62],[184, 81.6],[180, 76.6],[177.8, 83.6],],},{name: 'scatter2',data: [[175, 62],[184, 81.6],[180, 76.6],[177.8, 83.6],[192, 90],[176, 74.6],[174, 71],[184, 79.6],[192.7, 93.8],[171.5, 70],[173, 72.4],[176, 85.9],[176, 78.8],[180.5, 77.8],[172.7, 66.2],[176, 86.4],],},],},};},
</script>

>> 饼图/环形图/嵌套环形图：PieChart.vue（环形图都是饼图演变来的）

<template><div :id="id" :style="chartStyle"></div>
</template><script>
import Chart from './mixins/Chart';export default {mixins: [Chart],props: {// 提示框tooltipData: {type: Object,default() {return {formatter: '{b}: {c} ({d}%)',};},},// 是否是环形isRing: {type: Boolean,default: false,},// 是否显示延长线标签hasPieLabel: {type: Boolean,default: true,},},data() {return {};},methods: {init() {this.chartsDom = this.$echarts.init(document.getElementById(this.id));// 每次数据更新都清空一次实例，以便页面重新渲染，否则更新数据没有变化，页面看起来像没动document.getElementById(this.id).removeAttribute('_echarts_instance_');this.option = {title: {subtextStyle: {color: '#2D3E53',fontSize: 24,lineHeight: 32,fontWeight: 500,},textStyle: {color: '#7B93A7',fontSize: 12,lineHeight: 16,},left: 'center',top: 60,itemGap: 2,...this.titleData,},grid: {...this.gridData,},tooltip: {...this.tooltipConfig,...this.tooltipData,},legend: this.legendData.map((v) => ({top: 0,right: 0,icon: 'rect',itemWidth: 8,itemHeight: 8,itemGap: 12,textStyle: {fontSize: 12,color: '#455A74',},...v,})),color: this.colors,series: [],};// 处理 seriesthis.seriesData.forEach((item) => {const { data = [] } = item;const dataTemp = data.map((v) => ({ ...v, value: v.value || '' }));const serie = {type: 'pie',minAngle: 5,radius: this.isRing ? ['50', '70'] : ['0', '70'],center: ['50%', '92'],label: {show: this.hasPieLabel,formatter: '{b} {c} ({d}%)',fontSize: 12,color: '#455A74',},itemStyle: {borderColor: '#FFFFFF',borderWidth: 1,},...item,data: dataTemp,};this.option.series.push(serie);});this.chartsDom.setOption(this.option);},},
};
</script>

【使用示例】

饼图

<template><PieChart id="myPie" v-bind="myPie" />
</template><script>
import PieChart from '@/components/Charts/PieChart';export default {components: { PieChart },data() {return {myPie: {chartStyle: {height: '220px',},colors: ['#169BFA', '#FBAD3B', '#31CF9A'],legendData: [{ data: ['pie1', 'pie2', 'pie3'] }],seriesData: [{data: [{ name: 'pie1', value: 5 },{ name: 'pie2', value: 10 },{ name: 'pie3', value: 15 },],}],},};},
</script>

环形图

<template><PieChart id="myPie" v-bind="myPie" />
</template><script>
import PieChart from '@/components/Charts/PieChart';export default {components: { PieChart },data() {return {myPie: {isRing: true,chartStyle: {height: '220px',},titleData: {subtext: '100',text: '标题',},colors: ['#169BFA', '#FBAD3B', '#31CF9A'],legendData: [{ data: ['pie1', 'pie2', 'pie3'] }],seriesData: [{data: [{ name: 'pie1', value: 5 },{ name: 'pie2', value: 10 },{ name: 'pie3', value: 15 },],}],hasPieLabel: false,},};},
</script>

嵌套环形图

<template><PieChart id="myPie" v-bind="myPie" />
</template><script>
import PieChart from '@/components/Charts/PieChart';export default {components: { PieChart },data() {return {myPie: {isRing: true,chartStyle: {height: '220px',},colors: ['#169BFA', '#FBAD3B', '#31CF9A'],legendData: [{ data: ['pie1', 'pie2', 'pie3'] }],seriesData: [{ name: 'pie1', radius: [45, 50], center: ['50%', 60], data: [{ name: 'pie1', value: 60 },{ value: 100 - 60, itemStyle: { color: '#F6F6F6' }, emphasis: { disabled: true } }],},{ name: 'pie2', radius: [35, 40], center: ['50%', 60],data: [{ name: 'pie1', value: 40 },{ value: 100 - 40, itemStyle: { color: '#F6F6F6' }, emphasis: { disabled: true } }],},{ name: 'pie3', radius: [25, 30], center: ['50%', 60],data: [{ name: 'pie1', value: 80 },{ value: 100 - 80, itemStyle: { color: '#F6F6F6' }, emphasis: { disabled: true } }],},],hasPieLabel: false,},};},
</script>

>> 自定义仪表盘：GaugeChart.vue（如果是v4.版本的 Echarts，这种样式用原始的 gauge做不出来，需要加极坐标之类的做改造，见下）

<template><div :id="id" :style="chartStyle"></div>
</template><script>
import Chart from './mixins/Chart';export default {mixins: [Chart],props: {// 进度条progressData: {type: Object,dedault: () => {},},},data() {return {};},methods: {init() {this.chartsDom = this.$echarts.init(document.getElementById(this.id));// 每次数据更新都清空一次实例，以便页面重新渲染，否则更新数据没有变化，页面看起来像没动document.getElementById(this.id).removeAttribute('_echarts_instance_');this.option = {series: [{type: 'gauge',center: ['50%', '60%'],progress: {show: true,width: 10,roundCap: true,itemStyle: {// color: 'red' // 进度条颜色},...this.progressData,},axisLine: {roundCap: true,lineStyle: {width: 10,color: [[1, '#EBEBEB']],},},splitNumber: 4, // 分割段数splitLine: { // 分割线样式distance: -24,length: 5,lineStyle: {width: 2,color: '#A0A0A0',},},axisTick: { // 刻度样式distance: -21,length: 3,lineStyle: {width: 1,color: '#A0A0A0',},},axisLabel: { // 刻度文字样式distance: -10,color: '#455A74',fontSize: 10,},anchor: { // 指针固定点show: false,},pointer: { // 指针show: false,},title: { // 文字样式fontSize: 18,offsetCenter: [0, '80%'],// color: 'red'...this.titleData,},detail: { // 数值样式valueAnimation: true,fontSize: 24,offsetCenter: [0, 0],formatter: (value) => `${value}%`,},data: this.seriesData.map((item) => ({...item,})),},],};this.chartsDom.setOption(this.option);},},
};
</script>

【使用示例】

<template><GaugeChart id="myGauge" v-bind="myGauge" />
</template><script>
import GaugeChart from '@/components/Charts/GaugeChart';export default {components: { GaugeChart },data() {return {myGauge: {chartStyle: {width: '180px',height: '180px',},progressData: {itemStyle: {color: '#59D38C',}},seriesData: [{name: '优',value: 80,}],},};},
</script>

v4.版本实现

<template><div :id="id" :style="chartStyle"></div>
</template><script>
import Chart from './mixins/Chart'export default {mixins: [Chart],props: {// 区间颜色grade: {type: Object,default () {return {}}}},methods: {init () {this.chartsDom = this.$echarts.init(document.getElementById(this.id))// 每次数据更新都清空一次实例，以便页面重新渲染，否则更新数据没有变化，页面看起来像没动document.getElementById(this.id).removeAttribute('_echarts_instance_')const seriesValue = (this.seriesData && this.seriesData.length) ? this.seriesData[0]?.data : 0const option = {tooltip: {...this.tooltipConfig,...this.tooltipData},angleAxis: {show: false,max: (100 * 360) / 270, // -45度到225度，二者偏移值是270度除360度type: 'value',startAngle: 225 // 极坐标初始角度},barMaxWidth: 8, // 圆环宽度radiusAxis: {show: false,type: 'category'},// 极坐标系 圆环位置和大小polar: {center: ['50%', 105],radius: 130},series: [// 下层圆环，显示最大值 // 写在上层配置前，如果写在后面，需要设置 z属性（相当于z-index）来区分层级{type: 'bar',name: '当日负荷均值',data: [{value: 100, // 最大值itemStyle: {color: '#eee'}}],barGap: '-100%', // 柱间距离,上下两层圆环重合coordinateSystem: 'polar', // 对应极坐标系roundCap: true // 两端圆角},// 上层圆环，显示数据{type: 'bar',data: [{value: seriesValue,itemStyle: {color: this.grade.color}}],barGap: '-100%',coordinateSystem: 'polar',roundCap: true},// 仪表盘{type: 'gauge',center: ['50%', 105],radius: 80,detail: { // 补充文字formatter: this.grade.text,offsetCenter: [0, 18],fontSize: 18,color: this.grade.color},data: [{name: `${seriesValue}%` // 对应 title的设置}],title: { // 居中文字color: '#455A74',fontSize: 28,offsetCenter: [0, -12]},min: 0,max: 100,splitNumber: 4, // 分割段数pointer: {show: false},splitLine: { // 分割线样式length: 5,lineStyle: {width: 1,color: '#ccc'}},axisTick: { // 刻度样式length: 2,lineStyle: {color: '#ccc'}},axisLine: { // 刻度盘样式show: false},axisLabel: { // 刻度标签distance: -25, // 设置为负数，在刻度线外侧fontSize: 12,color: '#455A74',formatter: (value) => {// 显示 优良中差switch (String(value)) {case '0':return '0'case '25':return '25'case '50':return '50'case '75':return '75'case '100':return '100'default:return ''}}}}]}this.chartsDom.setOption(option)}}
}
</script>

【使用示例】

<template><GaugeChart id="myGauge" v-bind="myGauge" />
</template><script>
import GaugeChart from '@/components/Charts/GaugeChart';export default {components: { GaugeChart },data() {return {myGauge: {chartStyle: {height: '180px',},seriesData: [{name: 'xxx',value: 80,}],grade: {color: '#31CF9A',text: '优',}},};},
</script>

>> 雷达图

<template><div :id="id" :style="chartStyle"></div>
</template><script>
import Chart from './mixins/Chart';export default {mixins: [Chart],props: {},data() {return {};},methods: {init() {// 初始化this.chartsDom = this.$echarts.init(document.getElementById(this.id));// 每次数据更新都清空一次实例，以便页面重新渲染，否则更新数据没有变化，页面看起来像没动document.getElementById(this.id).removeAttribute('_echarts_instance_');// 处理 indicatorlet indicator = [];if (this.seriesData && this.seriesData.length > 0) {// 防止数据缺失const validData = this.seriesData.find((item) => (item.data && item.data.length > 0),);indicator = validData ? validData.data.map((item) => ({ name: item.name, min: 0, max: 1 }),) : [{}, {}, {}, {}, {}, {}];} else {for (let i = 0; i < 6; i += 1) {indicator.push({ name: '', min: 0, max: 1 },);}}this.option = {tooltip: {trigger: 'item',...this.tooltipConfig,...this.tooltipData,},legend: this.legendData.map((v) => ({bottom: 0,right: 20,icon: 'rect',itemStyle: {borderColor: '#FFFFFF',borderWidth: 12,},inactiveBorderColor: '#FFFFFF',...v,})),radar: {indicator,center: ['50%', '115'],radius: 85,splitNumber: 10,splitArea: {areaStyle: {color: ['rgba(255, 95, 95, 0.15)','rgba(255, 95, 95, 0.15)','rgba(255, 95, 95, 0.15)','rgba(255, 95, 95, 0.15)','rgba(255, 95, 95, 0.15)','rgba(255, 95, 95, 0.15)','rgba(255, 209, 25, 0.15)','rgba(255, 209, 25, 0.15)','rgba(255, 172, 76, 0.15)','rgba(49, 207, 154, 0.15)',],},},splitLine: {lineStyle: {color: ['rgba(0, 0, 0, 0)','rgba(0, 0, 0, 0)','rgba(0, 0, 0, 0)','rgba(0, 0, 0, 0)','rgba(0, 0, 0, 0)','rgba(0, 0, 0, 0)','rgba(45, 62, 83, 0.15)','rgba(0, 0, 0, 0)','rgba(45, 62, 83, 0.15)','rgba(45, 62, 83, 0.15)','rgba(45, 62, 83, 0.15)',],},},axisLine: {lineStyle: {color: 'rgba(45, 62, 83, 0.15)',},},name: {fontSize: 12,color: '#455A74',/* width: 50,overflow: 'breakAll', */formatter: (params) => {let text = params;if (text !== indicator[0].name && text !== indicator[3].name && text.length > 8) {const splitIndex = Math.ceil(text.length / 2);text = `${params.substr(0, splitIndex)}\n${params.substr(splitIndex)}`;}return text;},},},series: [],};// 处理 seriesthis.seriesData.forEach((item) => {this.option.series = [...this.option.series,...this.handleSeries(item),];// if (item.data && item.data.length > 0) {// }});this.chartsDom.setOption(this.option);},handleSeries(serie) {const { name, color, data } = serie;const dataList = data.map((item, index) => {const arr = new Array(data.length);arr.splice(index, 1, item);return arr;});return [data, ...dataList].map((item, index) => {return {type: 'radar',name,symbol: index === 0 ? 'circle' : 'none',symbolSize: 6,itemStyle: {color,borderColor: '#FFFFFF',borderWidth: 0.5,},lineStyle: {color: index === 0 ? color : 'transparent',},z: index === 0 ? 1 : 2,data: [item],};});},},
};
</script>

【使用示例】

<template><RadarChart id="myRadar" v-bind="myRadar" />
</template><script>
import RadarChart from '@/components/Charts/RadarChart';export default {components: { RadarChart },data() {return {myRadar: {chartStyle: {height: '220px',},colors: ['#31CF9A', '#FFAC4C'],legendData: [{ data: ['radar1', 'radar2'] }],seriesData: [{ name: 'radar1', color: '#31CF9A', data: [0.8， 0.9， 1， 0.9， 0.9] },{ name: 'radar2', color: '#FFAC4C', data: [0.4, 0.5, 0.6, 0.5, 0.6] },],},};},
</script>

Vue + Echarts(v5.版本)的简单组件封装（折线图、柱状图、散点图、饼/环形图、仪表盘、雷达图）相关推荐

（vue基础试炼_05）简单组件之间的传值
接上一篇:(vue基础试炼_04)使用组件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256 文章目录一.上篇回顾 ① 代 ...
vue项目中element-ui的分页器(组件封装）
vue项目中element-ui的分页器组件 <template><el-col :span="24" class="toolbar" sty ...
vue elementui 表格搜索筛选栏组件封装
1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项.表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,且多人开发情况下每个人写的样式都不相同,布局样式无法统一. ...
【Vue】解决el-dialog作为子组件封装点击显示与隐藏问题
element-ui中的el-dialog组件经常用作嵌套表单来使用,但是当我们把它封装成一个子组件时会发现点击隐藏与显示会出现问题.以下贴出关键代码,希望对大家有帮助,共同学习. 解决代码: el- ...
vue移动端车牌号输入键盘组件封装（支持新能源车牌和uniapp）
一.效果图二.说明支持点击输入框删除或输入车牌,可直接在uniapp项目中运行,将view标签换为div.并且将rpx单位换成px可在vue项目里运行三.代码 <temp ...
（vue基础试炼_04）使用组件改造TodoList
接上一篇:(vue基础试炼_03)使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令说明 v-bin ...
微信小程序使用echarts雷达图遇到的坑
最近一个医院的小程序需要使用雷达图来展示,简单总结一下. 1:使用场景:在详情页,根据测试的题目得分画成雷达图,测试的题目会得到2种结果,高危和低危.一种雷达图,但是样式不一样.如果是标题文字颜色不用 ...
ArcGIS API + Echarts 实现动态雷达图
雷达图(Radar Chart),又可称为戴布拉图.蜘蛛网图(Spider Chart),常用语财务报表中,但不限于财务报表.使用雷达图能让使用者能一目了然的了解各项指标的变动情形及其好坏趋向. EC ...
【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...

Vue + Echarts(v5.版本)的简单组件封装（折线图、柱状图、散点图、饼/环形图、仪表盘、雷达图）

一、效果图（数据不足，示例图可能比较秃）

二、代码

* mixin文件：Chart.js

>> 折线图：LineChart.vue

>> 柱状图：BarChart.vue（其实这里的柱状图和折线图都是二维坐标图，很多配置都是相似的，可以合并）

>> 散点图：ScatterChart.vue（其实与折线图、柱状图的配置差不多，只是数据格式略有差异）

>> 饼图/环形图/嵌套环形图：PieChart.vue（环形图都是饼图演变来的）

>> 自定义仪表盘：GaugeChart.vue（如果是v4.版本的 Echarts，这种样式用原始的 gauge做不出来，需要加极坐标之类的做改造，见下）

>> 雷达图

Vue + Echarts(v5.版本)的简单组件封装（折线图、柱状图、散点图、饼/环形图、仪表盘、雷达图）相关推荐

最新文章

热门文章