VUE echarts 柱状图、折线图 双Y轴 显示
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: [200, 200, 430, 360, 500, 500, 500, 450, 580, 500], // 柱状图2的数据
jdgtData: [300, 200, 100, 400, 100, 200, 100, 350, 380, 300], // 柱状图3的数据
cygtData: [150, 220, 430, 360, 450, 680, 100, 450, 680, 200], // 折线图的数据
//千分位格式
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;
},
// xAxisData:x轴的值, lineData1：已接单数量, lineData2：差异数量, barData1:工厂产能工天, barData2：已接单工天 ,lineData3 差异工天
drawLine(xAxisData, lineData1, lineData2, barData1, barData2 , barData3)
{
var that = this;
let eChart = echarts.init(document.getElementById("echart")); // 基于准备好的dom，初始化echarts实例
that.eChart = eChart;
eChart.setOption({
// 绘制图表
title: {text: ""},
//悬浮标
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++) {
//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" , //图例文字
},
selected:{
'已接单数量':false,
'差异数量' :false
}
},
xAxis: [
// x轴 10周
{
type: "category",
axisTick: {
show: false, // 坐标轴刻度
},
axisLine: {
show: true, // 坐标轴轴线
lineStyle: {
//color: "#eeeeee",
color: '#cccccc'
}
},
axisLabel: {
// 坐标轴刻度标签的相关设置
inside: false,
textStyle: {
color: "#999",
fontWeight: "normal",
fontSize: "12",
},
},
splitLine: {show: false}, // 去除网格线
axisPointer: {
type: 'shadow',
},
data: xAxisData,
},
{
type: "category",
axisLine: {show: false}, // 是否显示坐标轴轴线
axisTick: {show: false}, // 是否显示坐标轴刻度
axisLabel: {show: false}, // 是否显示刻度标签 柱状图上的标签
splitArea: {show: false}, // 是否显示分隔区域 背景遮罩
splitLine: {show: false}, // 是否显示分隔线
},
],
yAxis: [
// y轴
{
type: "value",
max: value => {
const { max, min } = value;
const absMax = Math.max(Math.abs(max), Math.abs(min));
return Math.floor(absMax * 1.2);
} ,
min: value => {
const { max, min } = value;
const absMax = Math.max(Math.abs(max), Math.abs(min));
return Math.floor(-absMax * 1.2);
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
//color: "#eeeeee",
color: '#cccccc'
},
},
axisLabel: {
textStyle: {
color: "#bac0c0",
fontWeight: "normal",
fontSize: "12",
},
formatter: "{value}",
},
splitLine: {
show: true, // 去除网格线
lineStyle: {
color: '#f8f8f8',
}
},
},{
type: "value",
max: value => {
const { max, min } = value;
const absMax = Math.max(Math.abs(max), Math.abs(min));
return Math.floor(absMax * 1.2);
} ,
min: value => {
const { max, min } = value;
const absMax = Math.max(Math.abs(max), Math.abs(min));
return Math.floor(-absMax * 1.2);
},
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: '已接单工天',
yAxisIndex: 1 ,
itemStyle: {
show: true,
// color: "#6ebbb8",
color: "#91CC75",
borderWidth: 0,
borderType: "solid",
emphasis: {
shadowBlur: 15,
shadowColor: "rgba(105,123, 214, 0.7)",
},
},
label: {
show: true,
position: 'insideRight',
// formatter: '{c}'
// formatter(params) { //自定义
// relVal = that.stateFormat(params.value,0);
// return relVal;
// },
},
zlevel: 2,
barWidth: 40,
data: barData2,
},
{ // 柱状图1 工厂差异工天
type: "bar",
name: '差异工天',
yAxisIndex: 1 ,
itemStyle: {
show: true,
//color: "#7ca6f8", // 柱状图的颜色
color: "#5470C6", // 柱状图的颜色
borderWidth: 0,
borderType: "solid",
emphasis: {
shadowBlur: 15,
shadowColor: "rgba(105,123, 214, 0.7)",
},
},
label: {
show: true,
position: 'insideRight',
// formatter: '{c}'
// formatter(params) { //自定义
// relVal = that.stateFormat(params.value,0);
// return relVal;
// },
},
zlevel: 1,
barWidth: 40,
data: barData3,
},
{ // 折线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}
',
// }
}
],
});
},