const barLineSymbolImg = [require('../../../../../images/components/app/xxx/icon-1.png'), require('../../../../../images/components/app/xxx/icon-2.png')];
// 导出模块
export default {
props: {
// 需要传递的数据
data: {
type: Array,
default() {
return [
{
name: '北京北京北京北京北京北京北京',
value1: 20,
value2: 15
},
{
name: '上海',
value1: 10,
value2: 5
},
{
name: '成都',
value1: 15,
value2: 25
},
{
name: '重庆',
value1: 20,
value2: 12
}
];
}
}
},
data() {
return {
// echarts对象
myEchart: null,
// 参数
options: {}
};
},
// 创建元素
mounted() {
this.init();
},
// 销毁
destroyed() {
// 销毁图表
this.destroyedChart();
},
methods: {
setDefaultOptions() {
this.options = {
// 提示框组件
tooltip: {
show: true,
trigger: 'axis',
formatter: function (a) {
return `${a[0].name}
<br>${a[1].seriesName}${a[0].value}件
<br>${a[3].seriesName}${a[3].value}件`;
}
},
// 当前有效绘制区域的占位
grid: {
top: 80,
right: 20,
left: 65,
bottom: 85
},
legend: {
show: true,
// 控制水平还是竖直
orient: 'horizontal',
textStyle: {
fontSize: 16,
color: '#bbd2fc'
},
// 控制上下距离
y: 20,
// legend之间的间距
itemGap: 50,
data: [{name: '数目一', icon: `image://${barLineSymbolImg[0]}`}, {name: '数目二', icon: `image://${barLineSymbolImg[1]}`}]
},
// x轴处理
xAxis: {
type: 'category',
data: [],
// 坐标轴
axisLine: {
show: true,
lineStyle: {color: '#012fb8'}
},
// 坐标轴分割线
splitLine: {
show: false,
lineStyle:{
color:'#071c4e',
type:'solid'
}
},
// 坐标轴的刻度
axisTick: {show: false},
// x 轴名称
axisLabel: {
color:'#bbd2fc',
formatter:function (value) {
let ret = '';
const maxLength = 5;
const valLength = value.length;
const rowN = Math.ceil(valLength / maxLength);
if (rowN > 1) {
for (let i = 0; i < 2; i++) {
let temp = '';
const start = i * maxLength;
const end = start + maxLength;
temp = `${value.substring(start, end)}\n`;
ret += temp;
}
return `${ret.substring(0, ret.length - 2)}...`;
}
return value;
},
margin: 20,
fontSize:16,
lineHeight: 18,
rotate:30,
interval: 0
}
},
// y轴处理
yAxis: [{
type: 'value',
// 设置成1保证坐标轴分割刻度显示成整数
minInterval: 1,
axisTick: {show: false},
axisLine:{show: false},
splitLine: {
show: true,
lineStyle:{
color:'#071c4e',
type:'solid'
}
},
splitNumber:4,
// 刻度值
axisLabel: {
margin: 25,
color:'#d2e4fc',
fontSize:16
},
name:'',
nameLocation:'end',
nameTextStyle:{
color:'#556372',
fontSize:16,
lineHeight: 40,
align:'right',
padding:[0, 25, 0, 0]
}
}],
series: [
// 数据柱子顶部圆颜色 【实际数据】2
{
name: '顶部圆圈',
type: 'pictorialBar',
symbol: 'circle',
symbolSize: [25, 8],
symbolOffset: [0, -4],
symbolPosition: 'end',
label: {
normal: {
show: false,
position: 'top',
textStyle: {
fontSize: '16',
color: '#01b4e6'
}
}
},
z: 3,
color: '#01b4e6',
itemStyle: {normal: {color: '#01b4e6'}},
// 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
silent: false,
barMinHeight: 5,
data: []
},
{
name: '数目一',
type: 'bar',
barWidth: 25,
barMinHeight: 4,
data: [],
z: 2,
// 添加渐变
itemStyle: {
normal: {
color: new window.echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: '#0f46c7'
},
{
offset: 1,
color: '#0aced4'
}
]
)
}
}
},
{
name: '底部圆圈',
type: 'pictorialBar',
symbol: 'circle',
symbolSize: [25, 8],
symbolOffset: [0, 4],
z: 3,
color: '#0061ff',
itemStyle: {normal: {color: '#0061ff'}},
// 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
silent: false,
barMinHeight: 5,
data: []
},
{
name: '数目二',
type: 'line',
// 拐点设置为实心
symbol: 'circle',
// 拐点大小
symbolSize: 16,
color: '#fff',
z: 5,
smooth: false,
data: [],
// 添加渐变
itemStyle: {
normal: {
// 拐点颜色
color: '#fff',
// 拐点边框颜色
borderColor: '#c8b62d',
// 拐点边框大小
borderWidth: 6
}
},
// 线的样式
lineStyle: {
normal: {
// 折线颜色
color: new window.echarts.graphic.LinearGradient(
0, 0, 1, 0,
[{
offset: 0,
color: '#ffa800'
},
{
offset: 1,
color: '#ffde00'
}
]
),
// 折现粗细
width: 3
}
},
label:{show:false}
}
]
};
},
/**
* @description 初始化的方法
* @name init
* @return {*} 无
*/
init() {
// 更新数据
this.update(this.data);
},
/**
* @description 刷新图表
* @return {*} 无
*/
refresh() {
if (this.myEchart) {
this.myEchart.resize();
}
},
/**
* @description 设置图表的数据
* @name getChartData
* @param {object} data 参数
* @return {*} 无
*/
update(data) {
// 先判断数据是否存在
if (!Array.isArray(data)) {
return false;
}
// 如果不存在echarts
if (!this.myEchart) {
// 图表对象
this.myEchart = window.echarts.init(this.$refs.jsEchart);
// 绑定resize 事件
this.bindResizeEvent();
}
// 设置默认参数
this.setDefaultOptions();
// 更新数据
this.updateData(data);
// 清空图表
this.myEchart.clear();
// 生成图表
this.myEchart.setOption(this.options);
},
updateData(data) {
// y 轴
const _yAxis = [];
// 【实际数据】
const _data1 = [];
const _data2 = [];
// 循环数据
data.forEach(function (item) {
// x 轴
_yAxis.push(item.name);
// 当前的值
const _value1 = Number(item.value1);
const _value2 = Number(item.value2);
// 数据列表
_data1.push(_value1);
_data2.push(_value2);
});
// x轴数据
this.options.xAxis.data = _yAxis;
// 处理series数据 （实际数据）
this.options.series[0].data = _data1;
this.options.series[1].data = _data1;
this.options.series[2].data = _data1;
this.options.series[3].data = _data2;
},
// resize 事件处理函数
resizeHandler() {
if (this.myEchart) {
this.myEchart.resize();
}
},
/**
* @description 绑定resize 事件
* @name init
* @return {*} 无
*/
bindResizeEvent() {
// 绑定resize事件
window.addEventListener('resize', () => {
this.resizeHandler();
});
},
// 取消事件绑定
unbindResizeEvent() {
// 取消绑定resize事件
window.removeEventListener('resize', () => {
this.resizeHandler();
});
},
/**
* @description 销毁图表
* @name destroyedChart
* @return {*} 无
*/
destroyedChart() {
// 如果存在echarts
if (this.myEchart) {
// 销毁实例，销毁后实例无法再被使用。
this.myEchart.dispose();
this.myEchart = null;
// 取消事件绑定
this.unbindResizeEvent();
}
}
}
};
legend中name和series中name要一致，才能显示出legend
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
