119 lines
2.9 KiB
Vue
119 lines
2.9 KiB
Vue
<template>
|
|
<div ref="chart" style="width: 520px; height: 280px;margin-top: 0%;"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
|
|
export default {
|
|
name: 'DoubleAxisChart',
|
|
mounted() {
|
|
this.initChart();
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
const chartDom = this.$refs.chart;
|
|
const myChart = echarts.init(chartDom);
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
},
|
|
formatter: (params) => {
|
|
console.log(params)
|
|
return `空箱：${params[0].value}标箱<br/>危险品：${params[1].value}标箱`;
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['空箱', '危险品'],
|
|
left: 'right',
|
|
icon: 'line',
|
|
itemWidth: 30,
|
|
itemHeight: .0,
|
|
itemGap: 10,
|
|
textStyle: {
|
|
color: 'white',
|
|
fontSize: 16,
|
|
fontWeight: 'normal',
|
|
fontFamily: 'Arial, sans-serif'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['点1', '点2', '点3', '点4', '点5', '点6', '点7']
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'white'
|
|
}
|
|
},
|
|
splitLine: { lineStyle: { color: '#081b42' } },
|
|
axisLabel: {
|
|
formatter: '{value}标箱'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: 'white'
|
|
}
|
|
},
|
|
splitLine: { lineStyle: { color: '#081b42' } },
|
|
axisLabel: {
|
|
formatter: '{value}标箱'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '空箱',
|
|
type: 'line',
|
|
stack: '总量',
|
|
areaStyle: {color: 'orange'},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
|
lineStyle: {
|
|
color: 'orange', // 线条颜色
|
|
width: 2, // 线条宽度
|
|
},
|
|
},
|
|
{
|
|
name: '危险品',
|
|
type: 'line',
|
|
yAxisIndex: 1, // 使用第二个Y轴
|
|
stack: '总量',
|
|
areaStyle: {color: 'blue'},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [220, 182, 191, 234, 290, 330, 310],
|
|
lineStyle: {
|
|
color: 'blue', // 线条颜色
|
|
width: 2, // 线条宽度
|
|
},
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
}
|
|
};
|
|
</script> |