<template>
<div id="main" style="width: 100%;height: 500px; padding-top: .6rem"></div>
</template>
data() {
return {
weekData: ["1周","2周","3周","4周","5周","6周","7周","8周","9周","10周"], //柱状图横轴
jdslData: [150, 220, 430, 360, 450, 680, 100, 450, 680, 200], // 折线图的数据
cyslData: [100, 200, 400, 300, 500, 500, 500, 450, 480, 400], // 柱状图1的数据
plgtData: [100, 200, 430, 360, 500, 500, 500, 450, 580, 500], // 柱状图2的数据
jdgtData: [300, 200, 100, 400, 100, 200, 100, 350, 380, 300], // 柱状图3的数据
}
},
stateFormat(num,n=2,symbol) {
// 保证为number类型
num = Number(num)
if(typeof num!=='number')throw new TypeError('num参数应该是一个number类型');
if(n<0)throw new Error('参数n不应该小于0');
var hasDot=parseInt(num)!=num;//这里检测num是否为小数,true表示小数
var m=(n!=undefined&&n!=null)?n:1;
num=m==0?num.toFixed(m)+'.':hasDot?(n?num.toFixed(n):num):num.toFixed(m);
symbol=symbol||',';
num=num.toString().replace(/(\d)(?=(\d{3})+\.)/g,function(match, p1,p2) {
return p1 + symbol;
});
if(n==0||(!hasDot&&!n)){//如果n为0或者传入的num是整数并且没有指定整数的保留位数,则去掉前面操作中的小数位
num=num.substring(0,num.indexOf('.'));
}
return num;
},
drawLine(xAxisData, lineData1, lineData2, barData1, barData2)
{
let eChart = echarts.init(document.getElementById("main")); // 基于准备好的dom,初始化echarts实例
this.eChart = eChart;
eChart.setOption({
// 绘制图表
title: {text: ""},
//鼠标悬浮提示语tooltip数据保留2位小数,或tooltip数据加单位,加%
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
// formatter: '{a}: {c}', //官方
formatter(params) { //自定义
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
//遍历出来的值一般是字符串,需要转换成数字,再进项tiFixed四舍五入
//relVal += '
' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(0)
relVal += '
' + params[i].marker + params[i].seriesName + ' : ' + that.stateFormat(params[i].value,0) //千分位
}
return relVal;
},
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
legend: {//图例名
show: true,
data: ['工厂产能工天', '已接单工天', '已接单数量', '差异数量'],
x: 'center', //图例在中间center 左边left 右边right
textStyle: { //图例字体的颜色
color: "#000" //图例文字
}
},
xAxis: [
// x轴 10周
{
type: "category",
axisTick: {
show: false, // 坐标轴刻度
},
axisLine: {
show: true, // 坐标轴轴线
lineStyle: {
color: "#eeeeee",
},
},
axisLabel: {
// 坐标轴刻度标签的相关设置
inside: false,
textStyle: {
color: "#999",
fontWeight: "normal",
fontSize: "12",
},
},
splitLine: {show: false}, // 去除网格线
data: xAxisData,
},
{
type: "category",
axisLine: {show: false}, // 是否显示坐标轴轴线
axisTick: {show: false}, // 是否显示坐标轴刻度
axisLabel: {show: false}, // 是否显示刻度标签 柱状图上的标签
splitArea: {show: false}, // 是否显示分隔区域 背景遮罩
splitLine: {show: false}, // 是否显示分隔线
},
],
yAxis: [
// y轴
{
type: "value",
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#eeeeee",
},
},
axisLabel: {
textStyle: {
color: "#bac0c0",
fontWeight: "normal",
fontSize: "12",
},
formatter: "{value}",
},
splitLine: {
show: true, // 去除网格线
lineStyle: {
color: '#f8f8f8'
}
},
}
],
series: [
{ // 柱状图1 工厂产能工天
type: "bar",
name: '工厂产能工天',
itemStyle: {
show: true,
//color: "#7ca6f8", // 柱状图的颜色
color: "#5470C6", // 柱状图的颜色
borderWidth: 0,
borderType: "solid",
emphasis: {
shadowBlur: 15,
shadowColor: "rgba(105,123, 214, 0.7)",
},
},
zlevel: 1,
barWidth: 40,
data: barData1,
},
{ // 柱状图2 已接单工天
type: "bar",
name: '已接单工天',
itemStyle: {
show: true,
// color: "#6ebbb8",
color: "#91CC75",
borderWidth: 0,
borderType: "solid",
emphasis: {
shadowBlur: 15,
shadowColor: "rgba(105,123, 214, 0.7)",
},
},
zlevel: 2,
barWidth: 40,
data: barData2,
},
{ // 折线1 已接单数量
zlevel: 3,
type: "line",
name: '已接单数量',
color: ["#8d83f7"], // 拐点颜色
symbolSize: 8, // 拐点的大小
symbol: "circle", // 拐点样式
label: {
show: true,
position: 'top',
// formatter: '{c}'
formatter(params) { //自定义
relVal = that.stateFormat(params.value,0);
return relVal;
},
},
data: lineData1,
itemStyle: {
normal: {
lineStyle: {
color: "#8d83f7", // 折线的颜色
type: "solid" // 折线的类型
}
}
},
//悬浮标
// tooltip: {
// formatter: '{b}
已接单数量:{c}
'
// }
},
{ // 折线2 差异数量
zlevel: 4,
type: "line",
name: '差异数量',
color: ["#ef836f"], // 拐点颜色
symbolSize: 8, // 拐点的大小
symbol: "circle", // 拐点样式
label: {
show: true,
position: 'top',
// formatter: '{c}'
formatter(params) { //自定义
relVal = that.stateFormat(params.value,0);
return relVal;
},
},
data: lineData2,
itemStyle: {
normal: {
lineStyle: {
color: "#ef836f", // 折线的颜色
type: "solid" // 折线的类型
}
}
},
//悬浮标
//tooltip: {
// formatter: '{b}
差异数量:{c}
'
// }
}
],
});
},
that.drawLine(that.weekData,that.jdslData,that.cyslData,that.plgtData,that.jdgtData);