1、在项目中下载Echarts包
npm install echarts --save
2、在需要的vue文件中导入Echarts 需要其他Echarts的配置项去官网查看即可
import * as echarts from 'echarts';
Echarts官网如下：
Apache ECharts
3、我们需要一个容器容纳Echarts图表并设置宽高
<div id="Sevendayalarmtimes"></div>
#Sevendayalarmtimes {
width: 400px;
height: 400px;
}
4、渲染Echarts图表的方法
async Sevendayalarmtimes() {
try {
这里写需要从后端获取的数据
} catch (error) {
console.log(error);
}
var myChart =
echarts.getInstanceByDom(document.getElementById('Sevendayalarmtimes'));
if (myChart == undefined) {
myChart = echarts.init(document.getElementById('Sevendayalarmtimes'));
}
this.$nextTick(() => {
var option;
option = {
// backgroundColor: '',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(9, 24, 48, 0.5)',
borderColor: 'rgba(75, 253, 238, 0.4)',
textStyle: {
color: '#CFE3FC',
},
extraCssText: 'width:160px',
borderWidth: 1,
formatter: function (params) {
let str = '';
for (let i = 0; i < params.length; i++) {
if (i == 0) {
str += `${params[i].name}<br/>${params[i].seriesName.slice(0, params[i].seriesName.indexOf('('))}:  <span>${params[0].data}</span>%<br/>`;
continue;
}
str += `${params[i].seriesName.slice(0, params[i].seriesName.indexOf('('))}:  <span>${params[i].data}</span>个<br/>`;
}
return str;
},
},
legend: [
{
data: ['报警次数-柱状'],
top: '25',
x: '30%',
itemWidth: 14,
textStyle: {
color: '#c1cadf',
fontSize: 16,
},
},
{
data: ['报警次数-折线'],
x: '50%',
top: '25',
itemStyle: {
borderWidth: 2,
},
textStyle: {
color: '#c1cadf',
fontSize: 16,
},
},
],
grid: {
left: '20px',
right: '20px',
top: '50px',
bottom: '30px',
containLabel: true,
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisTick: {
show: false,
},
data: [
"1/15/2024",
"1/16/2024",
"1/17/2024",
], // 将后端数据放在data中
axisLine: {
lineStyle: {
color: 'rgba(51, 176, 255, 1)',
},
},
axisLabel: {
interval: 0,
color: 'rgba(207, 227, 252, 1)',
fontSize: 14,
},
},
],
yAxis: [
{
type: 'value',
name: '',
axisTick: {
show: true,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(120, 160, 236, 1)',
},
symbol: ['none', 'arrow'],
symbolSize: [5, 12],
symbolOffset: [0, 10],
},
axisLabel: {
interval: 0,
color: 'rgba(207, 227, 252, 1)',
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(39, 57, 75, 1)',
width: 1,
type: 'solid',
},
},
},
{
type: 'value',
name: '',
axisTick: {
show: true,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(207, 227, 252, 1)t',
},
symbol: ['none', 'arrow'],
symbolSize: [5, 12],
symbolOffset: [0, 10],
},
min: 0,
max: 102,
axisLabel: {
interval: 0,
color: 'rgba(207, 227, 252, 1)',
formatter: '{value} %',
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(39, 57, 75, 1)',
width: 1,
type: 'solid',
},
},
},
],
series: [
{
name: '报警次数-折线',
yAxisIndex: 1,
type: 'line',
smooth: false,
data: [
"0",
"0",
"0",
], // 将后端数据放在data中
symbol: 'circle',
symbolSize: 8,
itemStyle: {
// normal: {
color: '#FFFFFF',
borderColor: 'rgba(0, 255, 240, 1)',
lineStyle: {
color: 'rgba(0, 255, 240, 1)',
},
// },
},
},
{
type: 'bar',
yAxisIndex: 0,
name: '报警次数-柱状',
itemStyle: {
// normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(32, 178, 232, 1)',
},
{
offset: 1,
color: 'rgba(32, 178, 232, 0)',
},
],
false
),
// },
},
barWidth: 24,
data: [
"0",
"0",
"0",
], // 将后端数据放在data中
},
],
};
myChart.clear();
option && myChart.setOption(option);
});
},
这样我们就完成了渲染可视化折线图和柱状图啦，希望可以帮到大家！！！
