前言：现在大数据的表现形式越来越花里胡哨了；这篇文章收录了四个比较特别的Echarts图，标记了特点和重点；并且附源码（包含数据处理），组件可直接使用哟
图一
- 特点
- 立体柱状图
- 每个柱子颜色不同
- 重点
- 定义和柱子相同数量的颜色
- symbol : 'diamond'可以定义成自己想要的svg
/**
* @version 1.0.1
* @author yfeng
* @createTime:2021-08-01,
* @updateTime:2021-08-01
* @copyright thunisoft fd
*/
// 事件处理函数
export default {
props: {
// 需要传递的数据
data: {
type: Array,
default() {
return [{
name:'<60',
value:20
}, {
name:'60-79',
value:20
}, {
name:'80-99',
value:20
}, {
name:'100-120',
value:20
}, {
name:'>120',
value:20
}];
}
}
},
data() {
return {
// echarts对象
myEchart: null,
// 数据列表
dataList: [],
// echart的options
options: {},
colors:[
{
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: '#6fe0f0'
},
{
offset: 0.5,
color: '#6fe0f0'
},
{
offset: 0.5,
color: '#79ebb3'
},
{
offset: 1,
color: '#79ebb3'
}
]
},
{
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: '#a03db6'
},
{
offset: 0.5,
color: '#a03db6'
},
{
offset: 0.5,
color: '#6b23a9'
},
{
offset: 1,
color: '#6b23a9'
}
]
},
{
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: '#2ab1c1'
},
{
offset: 0.5,
color: '#2ab1c1'
},
{
offset: 0.5,
color: '#1a72e3'
},
{
offset: 1,
color: '#1a72e3'
}
]
},
{
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: '#d86781'
},
{
offset: 0.5,
color: '#d86781'
},
{
offset: 0.5,
color: '#942f9f'
},
{
offset: 1,
color: '#942f9f'
}
]
},
{
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: '#2f71e0'
},
{
offset: 0.5,
color: '#2f71e0'
},
{
offset: 0.5,
color: '#0e29a1'
},
{
offset: 1,
color: '#0e29a1'
}
]
}
]
};
},
// 创建元素
mounted() {
this.init();
},
// 销毁
destroyed() {
// 销毁图表
this.destroyedChart();
},
methods: {
// 设置默认参数
setDefaultOptions() {
const _this = this;
// 默认的参数
this.options = {
title: [{
show:true,
text: '单位：人',
left: '90%',
top: '6%',
textAlign: 'center',
textStyle: {
fontSize: '16',
fontWeight: 'normal',
color: '#dff6fc',
textAlign: 'center'
}
}],
legend: {show:false},
grid: {
top: '25%',
left: '5%',
bottom: '15%',
right: '0',
containLabel: true
},
xAxis: [
{
type: 'category',
axisTick: {show: false},
axisLine: {show: false},
offset:10,
axisLabel: {
textStyle: {
color: '#b9eff8',
fontWeight: 'normal',
fontSize: 16
},
align:'center',
interval:0
},
data: []
}
],
yAxis: [
{
show: true,
type: 'value',
min:0,
max:10,
axisLabel: {
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize: 14
},
align:'center'
},
splitLine: {
show:true,
lineStyle: {color: 'rgba(74,92,138,0.5)'}
},
axisLine: {show: false}
}
],
series: [
{
z: 5,
name: 'top',
type: 'pictorialBar',
symbolPosition: 'end',
data: [],
cursor:'default',
symbolOffset: ['0', '-50%'],
symbol : 'diamond',
symbolSize: [20, 10],
itemStyle: {
normal: {
color: function (params) {
return _this.colors[params.dataIndex].colorStops[0].color;
}
}
},
label: {
show: true,
formatter: function (value) {
if (parseFloat(value.data)) {
return value.data;
}
return '';
},
position: 'top',
color: '#fff',
fontSize: 18,
textAlign: 'center'
}
}, {
z: 1,
type: 'bar',
name: 'jfkh',
barWidth: 20,
cursor:'default',
symbolPosition: 'end',
data: [],
itemStyle: {
normal: {
color: function (params) {
return _this.colors[params.dataIndex];
}
}
}
},
{
z: 1,
name: 'top',
type: 'pictorialBar',
symbolPosition: 'start',
cursor:'default',
data: [],
symbolOffset: ['0', '50%'],
symbol : 'diamond',
symbolSize: [20, 10],
itemStyle: {
normal: {
color: function (params) {
return _this.colors[params.dataIndex];
}
}
},
label: {show: false}
}
]
};
},
// 设置数据列表
setDataList(dataList) {
this.dataList = dataList;
},
/**
* @description 初始化的方法
* @name init
* @return {*} 无
*/
init() {
// 更新数据
this.update(this.data);
},
/**
* @description 刷新图表
* @return {*} 无
*/
refresh() {
if (this.myEchart) {
this.update(this.dataList);
}
},
/**
* @description 设置图表的数据
* @name getChartData
* @param {object} data 参数
* @return {*} 无
*/
update(data) {
// 先判断数据是否存在
if (!Array.isArray(data)) {
return false;
}
// 设置数据列表
this.setDataList(data);
// 如果不存在echarts
if (!this.myEchart) {
// 图表对象
this.myEchart = window.echarts.init(this.$refs.jsEchart);
// 绑定resize 事件
this.bindResizeEvent();
}
// 设置默认参数
this.setDefaultOptions();
// 方向排序
const _data = data;
// 更新数据
this.updateData(_data);
// 清空图表
this.myEchart.clear();
// 生成图表
this.myEchart.setOption(this.options);
},
// 更新数据对象
updateData(data) {
// 处理series数据
const series = [];
// 处理x轴
const xAxis = [];
// 设置y轴为10的倍数
const _num = 10;
data.forEach(item => {
xAxis.push(item.name);
series.push(item.value);
});
// 找到最大值
const max = Math.max.apply(null, series);
// 设置y轴为10的倍数
this.options.yAxis[0].max = max > _num ? Math.ceil(max / _num) * _num : _num;
this.options.xAxis[0].data = xAxis;
this.options.series.forEach(item => {
item.data = series;
});
},
// resize 事件处理函数
resizeHandler() {
if (this.myEchart) {
this.myEchart.resize();
}
},
/**
* @description 绑定resize 事件
* @name init
* @return {*} 无
*/
bindResizeEvent() {
// 绑定resize事件
window.eventHandler.on(window, 'resize', this.resizeHandler);
},
// 取消事件绑定
unbindResizeEvent() {
// 取消绑定resize事件
window.eventHandler.off(window, 'resize', this.resizeHandler);
},
/**
* @description 销毁图表
* @name destroyedChart
* @return {*} 无
*/
destroyedChart() {
// 如果存在echarts
if (this.myEchart) {
// 销毁实例，销毁后实例无法再被使用。
this.myEchart.dispose();
this.myEchart = null;
// 取消事件绑定
this.unbindResizeEvent();
}
}
}
};
图二
- 特点
- 饼图带symbol
- 边框
- 间距
- 重点
- 间距是series写的间距需要固定比较不容易想到使用total
- label展示（分左右两边）
- label上带图标
/**
* @version 1.0.1
* @author yfeng
* @createTime:2021-08-01,
* @updateTime:2021-08-01
* @copyright thunisoft fd
*/
// 事件处理函数
export default {
props: {
// 需要传递的数据
data: {
type: Array,
default() {
return [{
name:'A',
value:0
}, {
name:'B',
value:20
}, {
name:'C',
value:20
}, {
name:'D',
value:20
}, {
name:'E',
value:20
}];
}
}
},
data() {
return {
// echarts对象
myEchart: null,
// 数据列表
dataList: [],
// echart的options
options: {}
};
},
// 创建元素
mounted() {
this.init();
},
// 销毁
destroyed() {
// 销毁图表
this.destroyedChart();
},
methods: {
// 设置默认参数
setDefaultOptions() {
// 默认的参数
this.options = {
title:[{
show:false,
text:'10',
x: '50%',
y: '33%',
textAlign: 'center',
textStyle: {
fontSize: '46',
fontWeight:'bold',
color: '#36e7ff',
textAlign: 'center',
textShadowBlur:10,
textShadowColor:'rgba(233,236,254,0.35)'
}
}, {
show:false,
text:'总人数',
x: '50%',
y: '47%',
textAlign: 'center',
textStyle: {
fontSize: '24',
fontWeight:'bold',
color: '#d5f9fc',
textAlign: 'center'
}
}],
tooltip: {
show: true,
textStyle: {color: '#fff'},
padding: [10, 10]
},
series: [
{
type: 'pie',
radius: ['70', '82'],
center: ['50%', '50%'],
hoverAnimation: false,
startAngle:0,
z: 10,
label:{
show:true,
align: 'left',
rich: {
txt: {
color: '#fff',
width:55,
padding: [10, 0, 0, -40]
},
txt1: {
color: '#fff',
width:55,
padding: [10, 0, 0, -40]
},
san: {
width:40,
height:32,
padding: [20, 0, 0, -85],
align: 'left',
backgroundColor:{image:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA4CAYAAABHRFAgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyODNGQTY2RkRBNTcxMUVCQTFDM0VBNUFCNUI2NkZCMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyODNGQTY3MERBNTcxMUVCQTFDM0VBNUFCNUI2NkZCMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI4M0ZBNjZEREE1NzExRUJBMUMzRUE1QUI1QjY2RkIwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI4M0ZBNjZFREE1NzExRUJBMUMzRUE1QUI1QjY2RkIwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+eMf3MQAAFgJJREFUeNrMW2uPJEdW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'}
},
san1: {
width:40,
height:32,
padding: [20, 0, 0, -115],
align: 'left',
backgroundColor:{image:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA4CAYAAABHRFAgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyODNGQTY2RkRBNTcxMUVCQTFDM0VBNUFCNUI2NkZCMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyODNGQTY3MERBNTcxMUVCQTFDM0VBNUFCNUI2NkZCMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI4M0ZBNjZEREE1NzExRUJBMUMzRUE1QUI1QjY2RkIwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI4M0ZBNjZFREE1NzExRUJBMUMzRUE1QUI1QjY2RkIwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+eMf3MQAAFgJJREFUeNrMW2uPJEdW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'}
}
}
},
labelLine: {
show: true,
length:20,
length2:30,
lineStyle: {
color: '#228cd1',
width: 2
}
},
data: [{
itemStyle: {
normal: {
borderWidth:2,
borderColor: 'rgb(255,225,143)',
shadowBlur: 20,
shadowColor:'rgba(255,225,143,0.3)',
color: 'rgba(255,225,143,0.7)'
}
},
name: 'A',
value:50
}, {
value: 2,
name: '',
labelLine:{show:false},
emphasis:{labelLine:{show:false}},
itemStyle: {normal: {color: 'transparent'}}
}, {
itemStyle: {
normal: {
borderWidth:2,
borderColor: 'rgb(11,165,234)',
shadowBlur: 20,
shadowColor:'rgba(11,165,234,0.3)',
color: 'rgba(11,165,234,0.7)'
}
},
name: 'B',
value:50
}, {
value: 2,
name: '',
labelLine:{show:false},
emphasis:{labelLine:{show:false}},
itemStyle: {normal: {color: 'transparent'}}
}, {
itemStyle: {
normal: {
borderWidth:2,
borderColor: 'rgb(52,236,255)',
shadowBlur: 20,
shadowColor:'rgba(52,236,255,0.3)',
color: 'rgba(52,236,255,0.7)'
}
},
name: 'C',
value:50
}, {
value: 2,
name: '',
labelLine:{show:false},
emphasis:{labelLine:{show:false}},
itemStyle: {normal: {color: 'transparent'}}
}, {
itemStyle: {
normal: {
borderWidth:2,
borderColor: 'rgb(0,252,155)',
shadowBlur: 20,
shadowColor:'rgba(0,252,155,0.3)',
color: 'rgba(0,252,155,0.7)'
}
},
name: 'D',
value:50
}, {
value: 2,
name: '',
labelLine:{show:false},
emphasis:{labelLine:{show:false}},
itemStyle: {normal: {color: 'transparent'}}
}, {
itemStyle: {
normal: {
borderWidth:2,
borderColor: 'rgb(244,115,195)',
shadowBlur: 20,
shadowColor:'rgba(244,115,195,0.3)',
color: 'rgba(244,115,195,0.7)'
}
},
name: 'E',
value:50
}, {
value: 20,
name: '',
labelLine:{show:false},
emphasis:{labelLine:{show:false}},
itemStyle: {normal: {color: 'transparent'}}
}]
}
]
};
},
// 设置数据列表
setDataList(dataList) {
this.dataList = dataList;
},
/**
* @description 初始化的方法
* @name init
* @return {*} 无
*/
init() {
// 更新数据
this.update(this.data);
},
/**
* @description 刷新图表
* @return {*} 无
*/
refresh() {
if (this.myEchart) {
this.update(this.dataList);
}
},
/**
* @description 设置图表的数据
* @name getChartData
* @param {object} data 参数
* @return {*} 无
*/
update(data) {
// 先判断数据是否存在
if (!Array.isArray(data)) {
return false;
}
// 设置数据列表
this.setDataList(data);
// 如果不存在echarts
if (!this.myEchart) {
// 图表对象
this.myEchart = window.echarts.init(this.$refs.jsEchart);
// 绑定resize 事件
this.bindResizeEvent();
}
// 设置默认参数
this.setDefaultOptions();
// 方向排序
const _data = data;
// 更新数据
this.updateData(_data);
// 清空图表
this.myEchart.clear();
// 生成图表
this.myEchart.setOption(this.options);
},
// 更新数据对象
updateData(data) {
// 获取数据的长度
const length = data.length;
// 因为有间距所以series是两份
const _num = 2;
// 总数
let total = 0;
// 取需要长度的series
this.options.series[0].data.splice(length * _num);
// 正常的数据处理并获取total
this.options.series[0].data.forEach((item, index) => {
if (index % _num === 0) {
item.name = data[index / _num].name;
item.value = data[index / _num].value;
total += parseFloat(item.value);
}
});
// 不能放在上面写是因为需要total
this.options.series[0].data.forEach((item, index) => {
if (index % _num !== 0) {
// 一个随机的值
const _random = 50;
item.value = total / _random;
}
});
this.options.tooltip.formatter = function (params) {
const _percent = 100;
let text = `<div>${params.marker} ${params.data.name}：${params.data.value}人`;
text += `<span style="padding-left: 18px">${Math.round((parseFloat(params.data.value) / total * _percent) * _percent) / _percent}%</span></div>`;
if (params.data.name) {
return text;
}
};
this.options.series[0].label.formatter = function (params) {
// 当前值加上之前的值
let current = 0;
if (params.dataIndex % _num === 0) {
data.forEach((item, index) => {
// 当前值一半加上前面的值是否大于50%（判断label朝向）
if (index <= (params.dataIndex / _num)) {
if (index === params.dataIndex / _num) {
current += Number(item.value) / _num;
} else {
current += Number(item.value);
}
}
});
}
if (params.data.name) {
// 因为是从4/1处开始的所以是0.25
// 若当前值一半加上前面的值的占比大于0.5三角形朝右，相反朝左
if (current / total >= 0.25 && current / total < 0.75) {
return `{txt1| ${params.data.value}}{san1|}`;
}
return `{txt| ${params.data.value}}{san|}`;
}
};
},
// resize 事件处理函数
resizeHandler() {
if (this.myEchart) {
this.myEchart.resize();
}
},
/**
* @description 绑定resize 事件
* @name init
* @return {*} 无
*/
bindResizeEvent() {
// 绑定resize事件
window.eventHandler.on(window, 'resize', this.resizeHandler);
},
// 取消事件绑定
unbindResizeEvent() {
// 取消绑定resize事件
window.eventHandler.off(window, 'resize', this.resizeHandler);
},
/**
* @description 销毁图表
* @name destroyedChart
* @return {*} 无
*/
destroyedChart() {
// 如果存在echarts
if (this.myEchart) {
// 销毁实例，销毁后实例无法再被使用。
this.myEchart.dispose();
this.myEchart = null;
// 取消事件绑定
this.unbindResizeEvent();
}
}
}
};
- echarts官网上网友提供了各种各样的图，如果你做了非常炫酷的可以往上传哟www.makeapie.com/explore.htm…
- 对于拿到一个自己没有见过的图形的时候我的做法
- 先在上面网址找一个相似的图像
- 在根据自己需要去调整，调整的时候参照API（echarts.apache.org/zh/option.h…
- 如果echarts实在不能解决，就用css+js解决吧
- echarts版本不同，有些配置项层级可能不同
- 由于代码太多，字数超过限制，所以下面链接还有两个图
- juejin.cn/post/699801…
- 之前还遇到过echarts中series中的lable使用rich并且改变position文字出现黑边的问题详细内容参照（juejin.cn/post/684490…
