共计 4083 个字符，预计需要花费 11 分钟才能阅读完成。
问题形容
产品要这样的成果，就做这样的成果呗。有图有假相，咱们先来看一下效果图：
效果图
代码附上
运行的话，间接赋值粘贴即可，遇到相似的性能，ctrl+CV 改一下就行啦 ^_^
<template>
<div class="eWrap">
<div id="echartsDom"></div>
</div>
</template>
<script>
import Echarts from "echarts";
export default {data() {
return {
myChart: null, // 定义变量用来寄存 echarts 实例
xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], // 两个 echarts 专用的 x 轴的数据
y1Data: [8888, 9999, 7777, 10000, 3334, 7878, 6543], // 小件货物
y2Data: [56, 64, 32, 58, 64, 76, 81], // 网点负荷
y3Data: [88, 99, 77, 100, 21, 66, 95], // 大件货物
};
},
mounted() {this.drawEcharts();
},
methods: {
// 画图办法
drawEcharts() {this.myChart = Echarts.init(document.getElementById("echartsDom"));
this.myChart.setOption({color: ["#bfa", "#baf", "pink", "#baf"], // 配置数据色彩
grid: [
// 配置第一个折线图的地位
{
left: "14.5%",
right: "12%",
top: "10%",
height: "32%",
},
// 配置第二个折线图地位
{
left: "14.5%",
right: "12%",
top: "60%",
height: "32%",
},
],
tooltip: {
trigger: "axis",
// formatter 函数动静批改 tooltip 款式
formatter: function (params) {if (params) {
var htmlStr = "";
htmlStr += params[0].name.replace(/\-/g, "/") + "<br/>"; // x 轴的名称
for (var i = 0; i < params.length; i++) {var param = params[i]; // 存一份 item 项
var seriesName = param.seriesName; // 图例名称
var value = param.value; // y 轴值
var color = param.color; // 图例色彩
htmlStr += "<div>";
htmlStr +=
'<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
color +
';"></span>';
// 圆点前面显示的文本
htmlStr += seriesName + "：" + value;
switch (seriesName) {
case "小件货物":
htmlStr += "" +" 件 ";
break;
case "网点负荷":
htmlStr += "" +"%";
break;
case "大件货物":
htmlStr += "" +" 件 ";
break;
default:
htmlStr += " ";
}
htmlStr += "</div>";
}
return htmlStr;
} else {return;}
},
backgroundColor: "#ccc",
borderWidth: 1,
borderColor: "#ccc",
padding: 10,
textStyle: {
color: "#000",
fontSize: 12,
align: "left",
},
},
legend: {
show: true,
x: "center",
y: "0",
data: ["小件货物", "网点负荷", "大件货物", "网点负荷"],
textStyle: {fontSize: 12,},
},
// 将高低两个 tootip 合成一个
axisPointer: {link: { xAxisIndex: "all"},
},
xAxis: [
{
type: "category",
scale: true,
axisLabel: {show: false,},
axisTick: {alignWithLabel: true,},
splitLine: {show: false,},
data: this.xData, // x 轴工夫的数据
},
{
gridIndex: 1,
type: "category",
scale: true,
axisLabel: {fontSize: 10,},
axisTick: {alignWithLabel: true,},
splitLine: {show: false,},
data: this.xData, // x 轴工夫的数据
},
],
yAxis: [
{
type: "value",
name: "件数",
nameLocation: "center",
nameGap: 50,
nameTextStyle: {
fontSize: 12,
fontWeight: "500",
},
axisLabel: {fontSize: 12,},
min: function (value) {return parseInt(value.min);
},
max: function (value) {return parseInt(value.max * 1.05);
},
scale: false,
boundaryGap: [0, "100%"],
splitLine: {show: false,},
splitNumber: 4, // 设置坐标轴的宰割段数
},
{
type: "value",
name: "负荷 / 百分比",
nameLocation: "center",
nameGap: 42,
nameTextStyle: {fontSize: 12,},
axisLabel: {fontSize: 12,},
// min: function (value) {// return parseInt(value.min);
// },
// max: function (value) {// return parseInt(value.max * 1.05);
// },
scale: true,
boundaryGap: [0, "100%"],
splitLine: {show: false,},
splitNumber: 4, // 设置坐标轴的宰割段数
},
{
type: "value",
name: "件数",
nameLocation: "center",
gridIndex: 1,
nameGap: 30,
nameTextStyle: {fontSize: 12,},
axisLabel: {fontSize: 12,},
min: function (value) {return parseInt(value.min);
},
max: function (value) {return parseInt(value.max * 1.05);
},
scale: true,
boundaryGap: [0, "100%"],
splitLine: {show: false,},
splitNumber: 4, // 设置坐标轴的宰割段数
},
{
type: "value",
name: "负荷 / 百分比",
nameLocation: "center",
gridIndex: 1,
nameGap: 42,
nameTextStyle: {fontSize: 12,},
axisLabel: {fontSize: 12,},
// min: function (value) {// return parseInt(value.min);
// },
// max: function (value) {// return parseInt(value.max * 1.05);
// },
scale: true,
boundaryGap: [0, "100%"],
splitLine: {show: false,},
splitNumber: 4, // 设置坐标轴的宰割段数
},
],
dataZoom: [
{
type: "inside",
startValue: this.y1Data.length - 4, // 搁置最初 4 个数组
endValue: this.y1Data.length - 1,
xAxisIndex: [0, 1], // 显示 0 1 的数据，这个要加，不加的话，悬浮提醒就会出问题
},
],
series: [
{
name: "小件货物",
type: "line",
xAxisIndex: 0,
yAxisIndex: 0,
hoverAnimation: true, // 悬浮的动画加上
data: this.y1Data, // 小件货物
},
{
name: "网点负荷",
type: "line",
xAxisIndex: 0,
yAxisIndex: 1,
hoverAnimation: true, // 悬浮的动画加上
data: this.y2Data, // 网点负荷
},
{
name: "大件货物",
type: "line",
xAxisIndex: 1,
yAxisIndex: 2,
hoverAnimation: true, // 悬浮的动画加上
data: this.y3Data, // 大件货物
},
{
name: "网点负荷",
type: "line",
xAxisIndex: 1,
yAxisIndex: 3,
hoverAnimation: true, // 悬浮的动画加上
data: this.y2Data, // 网点负荷
},
],
});
// 自适应
window.addEventListener("resize", () => {this.myChart.resize();
});
},
},
};
</script>
<style lang="less" scoped>
.eWrap {
width: 100%;
height: 400px;
overflow: hidden;
#echartsDom {
width: 100%;
height: 100%;
}
}
</style>
正文完
