1. vue中 动态循环引用echarts
<div v-for="(item, index) in currentData" :key="index">
<line-charts :id="`echarts${index}`" :title="item.name" :style="{ width: '596px', height: '218px' }" :chart-data="item"></line-charts>
</div>
// 单独写一个echarts 组件
lineCharts.vue
<template>
<div class="c-line-charts-item">
<div class="title">{{ title }}</div>
<div class="ehcarts" :id="id"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'LineCharts',
props: {
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '',
},
title: {
type: String,
default: '温度',
},
id: {
type: String,
default: '',
},
chartData: {
type: Object,
default: () => {
return []
},
},
},
data() {
return {
chart: null,
maxScope: 4,
minScope: 2,
maxNum: 8,
}
},
computed: {
style() {
return {
height: '218px',
width: '100%',
}
},
optionsData() {
return this.chartData
},
},
mounted() {
this.initEchart()
},
methods: {
/**
* @description 初始化echarts图表
*/
initEchart() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.clear() // 适用于大数据量的切换时图表绘制错误,先清空在重绘
const options = {
grid: {
left: '5%',
top: '12%',
right: '5%',
bottom: '8%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisLine: {
show: true,
lineStyle: { color: '#5A569F', width: 1 },
},
axisTick: { show: false },
splitLine: { show: false }, //x轴不显示分割线
axisLabel: {
margin: 12,
textStyle: { color: '#B6D2E9', fontSize: 12 },
},
data: ['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00'],
},
],
yAxis: [
{
type: 'value',
// z: 3,
splitNumber: 4,
// max: 3.65,
// min: 0,
scale: true,
axisTick: { show: false },
axisLabel: {
margin: 12,
textStyle: { color: '#B6D2E9', fontSize: 12 },
},
axisLine: {
show: true,
lineStyle: { color: '#5A569F', width: 1 },
},
splitLine: { lineStyle: { type: 'solid', color: '#3a457d', width: 1 }, show: true },
},
],
visualMap: {
show: false,
dimension: 1,
hoverLink: true,
pieces: [
//基准线 范围之内线条颜色 lt（小于），gt（大于），lte（小于等于），gte（大于等于）
{ gte: 0, lte: this.minScope, color: '#ff6666' },
{ gte: this.minScope, lte: this.maxScope, color: '#56f9ff' },
{ gte: this.maxScope, lte: this.maxNum, color: '#ff6666' },
],
},
series: [
{
type: 'line',
lineStyle: { width: 2.5 },
// smooth: true, // 圆滑过渡
showSymbol: false, //显示点点
animation: true,
hoverAnimation: false,
areaStyle: {
origin: 'start',
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#ff6666' },
{ offset: 0.5, color: 'transparent' },
// { offset: 1, color: 'transparent' },
],
},
},
markLine: {
//两条基准线 最大值和最小值范围
symbol: 'none',
silent: true,
lineStyle: { normal: { type: 'solid' } },
label: { position: 'start' },
data: [
{
yAxis: this.maxScope,
lineStyle: { width: 1.4, color: '#64DB83' },
label: { show: false },
},
{
yAxis: this.minScope,
lineStyle: { width: 1.4, color: '#64DB83' },
label: { show: false },
},
],
},
data: ['3', '1.2', '1.3', '3.8', '4', '4', '6', '0.2', '0.2', '5', '4.9', '3.5', '3.5', '3.5', '1', '2', '2.3', '3.5', '5', '6'],
},
{
type: 'line',
lineStyle: { width: 0 },
showSymbol: false, //显示点点
animation: true,
hoverAnimation: false,
tooltip: {
show: true,
},
},
{
type: 'line',
lineStyle: { width: 0 },
showSymbol: false,
animation: false,
hoverAnimation: false,
data: ['3', '1.2', '1.3', '3.8', '4', '4', '6', '0.2', '0.2', '5', '4.9', '3.5', '3.5', '3.5', '1', '2', '2.3', '3.5', '5', '6'],
areaStyle: {
origin: 'end',
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0.6, color: 'transparent' },
{ offset: 1, color: '#ff6666' },
],
},
},
},
],
}
this.chart.setOption(options)
},
},
beforeDestroy() {
if (!this.chart) return
this.chart.dispose()
this.chart = null
},
}
</script>
<style lang="less" scoped>
.c-line-charts-item {
width: 596px;
height: 218px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid #263966;
margin-right: 20px;
.title {
width: 64px;
height: 24px;
font-size: 14px;
font-weight: 500;
line-height: 24px;
text-align: center;
color: #ffffff;
background: #3e71f7;
}
.ehcarts {
width: 100%;
height: 190px;
margin-top: 4px;
}
}
</style>
2.echarts环形图图动态展示高亮 延伸出的文字动态添加图标文字 指上去中间动态显示百分比%
/**
* @description 获取每项的百分比
*/
formatNumber(arr) {
if (!arr.length) {
return 0
}
let total = 0
let percent
arr.forEach(item => {
total += item.value
percent = ((arr[0].value / total) * 100).toFixed(1)
})
return percent
},
/**
* @description 控制echarts图环形部分高亮显示
*/
showHighLightPart() {
for (let i = 0; i < this.list.length; i++) {
if (i == this.showDataIndex) {
this.chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: i,
})
} else {
this.chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: i,
})
}
}
},
/**
* @description 初始化ehcarts
*/
initEcharts() {
this.chart = echarts.init(document.getElementById('medical-right1-echarts'))
// 检测到鼠标悬停事件 取消默认高亮
this.chart.on('mouseover', params => {
this.showDataIndex = params.dataIndex
this.showHighLightPart()
// 鼠标移入 动态显示圆环中的文字
// let op = this.chart.getOption()
// let _title = [
// {
// text: '{percent|' + params.percent + '%}',
// top: '50%',
// left: 'center',
// textStyle: {
// rich: rich,
// },
// },
// ]
// op.title = _title
// this.chart.setOption(op)
})
// 监听鼠标移出 默认显示高亮部分
this.chart.on('mouseout', e => {
this.showHighLightPart()
})
const echartData = this.list
const weatherIcons = [require('../../../assets/ico/medical-waste/ic_hua.svg'), require('../../../assets/ico/medical-waste/ic_gan.svg'), require('../../../assets/ico/medical-waste/ic_bing.svg'), require('../../../assets/ico/medical-waste/ic_sun.svg'), require('../../../assets/ico/medical-waste/ic_yao.svg')]
const rich = {
percent: {
color: '#A2C7F3',
fontSize: 22,
fontWeight: 600,
align: 'center',
},
yellow: {
color: 'rgba(239,205,105,1)',
fontSize: 20,
fontWeight: 600,
align: 'left',
padding: [0, 0, 0, 35],
},
white: {
color: 'rgba(255,255,255,1)',
align: 'left',
fontSize: 18,
padding: [8, 7],
},
img: {
backgroundColor: {
image: weatherIcons[0],
},
width: 28,
height: 28,
},
img1: {
backgroundColor: {
image: weatherIcons[1],
},
width: 28,
height: 28,
},
img2: {
backgroundColor: {
image: weatherIcons[2],
},
width: 28,
height: 28,
},
img3: {
backgroundColor: {
image: weatherIcons[3],
},
width: 28,
height: 28,
},
img4: {
backgroundColor: {
image: weatherIcons[4],
},
width: 28,
height: 28,
},
}
const options = {
// title: [
// {
// text: '{percent|' + this.formatNumber(this.list) + '%}',
// top: '50%',
// left: 'center',
// textStyle: {
// rich: rich,
// },
// },
// ],
tooltip: {
trigger: 'item',
formatter: params => {
return `${params.seriesName}<br/>${params.marker} ${params.name}: ${params.percent}%`
},
},
series: [
{
name: '访问来源',
type: 'pie',
x: '0',
y: '20',
radius: ['50%', '65%'],
clockWise: true,
hoverAnimation: true,
avoidLabelOverlap: true,
color: ['#3385f1', '#335af1', '#26edd2', '#45d1ff', '#36a3ff'],
label: {
normal: {
formatter: function(params) {
const index = params.dataIndex
if (index === 0) {
// 自定义显示label图标
return '{img|}{white|' + params.name + '}\n{yellow|' + params.value + '%}'
} else if (index === 1) {
return '{img1|}{white|' + params.name + '}\n{yellow|' + params.value + '%}'
} else if (index == 2) {
return '{img2|}{white|' + params.name + '}\n{yellow|' + params.value + '%}'
} else if (index == 3) {
return '{img3|}{white|' + params.name + '}\n{yellow|' + params.value + '%}'
} else if (index == 4) {
return '{img4|}{white|' + params.name + '}\n{yellow|' + params.value + '%}'
}
},
rich: rich,
},
},
labelLine: {
normal: {
length: 10,
length2: 50,
lineStyle: {
width: 2,
},
},
},
data: echartData,
},
],
}
this.chart.setOption(options)
// 默认显示高亮部分
this.showHighLightPart()
},
3.echarts中饼图圆环 中间空白处指上去会显示文字......（bug）
/**
* @description 控制连个圆环中间的固定间距
*/
getFixedSpace(arr) {
if (!arr.length) return
let totalNum = 0
arr.forEach(item => {
totalNum += item.value
})
return totalNum * 0.3
},
const color = [
['#506cdb', '#63ddfe'],
['#db5fff', '#dd5fff'],
]
const data = []
for (let i = 0; i < this.echartsData1.length; i++) {
data.push(
{
value: this.echartsData1[i].value,
name: this.echartsData1[i].name,
itemStyle: {
normal: {
borderWidth: 50,
shadowBlur: 20,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: color[i][0],
},
{
offset: 1,
color: color[i][1],
},
]),
},
},
},
{
value: this.getFixedSpace(this.echartsData1) / 20,
name: '',
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
},
},
}
)
}
const options = {
title: [
{
text: '日常监督',
x: 'center',
top: '30%',
textStyle: {
textAlign: 'center',
color: '#fff',
fontSize: 18,
},
},
{
text: this.checkrecShouldCount,
x: 'center',
top: '48%',
textStyle: {
textAlign: 'center',
fontSize: 24,
color: '#fdf914',
},
},
],
tooltip: {
trigger: 'item',
formatter: function (param) {
//过滤圆环指上空白区显示错误信息
if (param.name === '') return
return `${param.seriesName}<br/>${param.name}: ${param.value}`
},
textStyle: {
fontSize: 18,
},
},
series: [
{
name: '日常监督',
type: 'pie',
radius: ['70%', '80%'],
avoidLabelOverlap: false,
center: ['50%', '50%'],
hoverOffset: 5, //鼠标移上去的偏移
label: {
show: false,
position: 'outside',
},
data: data,
},
],
}
