先上代码
入口dashboard.vue
<template>
<div class="home">
<!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
<HelloWorld msg="hello" />
<e-two-col
:maxArr="maxArr"
:testArr="testArr"
:nameArr="nameArr"
:sizeArr="sizeArr"
/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import ETwoCol from "../components/eTwoCol.vue";
export default {
name: "Home",
data() {
return {
msg: "",
// Size Array [OPTIONAL]
// width | height (px)
// Default setting: 500x400
sizeArr: [],
// Name Array [MUST]
// From 0 to 2
// y axis first name
// y axis second name
// y axis line name
nameArr: ["Suc", "Fail", "Per"],
// Maximum Array [MUST]
// Corresponding to testArr a b maximum range
// [0]:y axis maximun
// [1]:y axis percent maximum
maxArr: [25, 35],
// Data Array [MUST]
// id---x axis
// a---y axis first column
// b---y axis second column
// c---y axis line (% percent)
testArr: [
{ id: 1, a: 11, b: 22, c: 20 },
{ id: 2, a: 3, b: 5, c: 12 },
{ id: 3, a: 8, b: 7, c: 30 },
{ id: 4, a: 18, b: 9, c: 17 },
{ id: 5, a: 15, b: 8, c: 23 },
],
};
},
components: {
HelloWorld,
ETwoCol,
},
};
</script>
组件区/components/eTwoCol.vue
<template>
<div id="father">
<el-card id="colAll"> </el-card>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
// Remember ‘‘ !!!
props: ["testArr", "maxArr", "nameArr", "sizeArr"],
data() {
return {
// Auto Resize
myChart: [],
};
},
mounted() {
// The default echarts table shows this month
window.onresize = () => {
this.myChart.resize();
};
let sizeArr = this.sizeArr.length ? this.sizeArr : ["500px", "400px"];
let t = document.getElementById("colAll");
t.style.width = sizeArr[0];
t.style.height = sizeArr[1];
this.drawColAll();
console.log("Name", this.nameArr);
},
methods: {
drawColAll() {
if (
this.myChart != null &&
this.myChart != "" &&
this.myChart != undefined
) {
this.myChart.dispose();
}
this.myChart = echarts.init(document.getElementById("colAll"));
// split data into different arrays
let maxArr = this.maxArr;
let nameArr = this.nameArr;
// let sizeArr = ["500px", "500px"];
let aArr = [];
let bArr = [];
let perArr = [];
let keyArr = [];
this.testArr.forEach((key) => {
keyArr.push(key.id);
aArr.push(key.a);
bArr.push(key.b);
perArr.push(key.c);
});
console.log("key", keyArr, "\nA", aArr, "\nB", bArr, "\nPer", perArr);
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(75, 253, 238, 0.4)",
textStyle: {
color: "#CFE3FC",
},
borderWidth: 1,
},
legend: [
{
data: [nameArr[0]],
top: "25",
x: "10%",
itemWidth: 14,
borderColor: "rgba(255, 192, 0, 1)",
textStyle: {
color: "#c1cadf",
},
},
{
data: [nameArr[1]],
top: "25",
x: "30%",
itemWidth: 14,
textStyle: {
color: "#c1cadf",
},
},
{
// series name and legend name should be the same
data: [nameArr[2] + "(%)"],
x: "50%",
// height with the top floor
top: ‘25‘,
itemStyle: {
borderWidth: 2,
},
textStyle: {
color: "#c1cadf",
},
},
],
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: keyArr,
axisLine: {
lineStyle: {
color: "rgba(51, 176, 255, 1)",
},
},
},
],
yAxis: [
{
type: "value",
axisTick: {
show: true,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(120, 160, 236, 1)",
},
symbol: ["none", "arrow"],
symbolSize: [5, 12],
symbolOffset: [0, 10],
},
max: maxArr[0],
splitLine: {
show: false,
lineStyle: {
color: "rgba(39, 57, 75, 1)",
width: 1,
type: "solid",
},
},
},
{
type: "value",
axisTick: {
show: true,
},
axisLabel: {
formatter: "{value} %",
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(207, 227, 252, 1)t",
},
symbol: ["none", "arrow"],
symbolSize: [5, 12],
symbolOffset: [0, 10],
},
min: 0,
max: maxArr[1],
splitLine: {
show: false,
lineStyle: {
color: "rgba(39, 57, 75, 1)",
width: 1,
type: "solid",
},
},
},
],
series: [
{
// series name and legend name should be the same
name: nameArr[2] + "(%)",
yAxisIndex: 1,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(194, 175, 223, 1)",
},
{
offset: 1,
color: "rgba(98, 227, 255, 0)",
},
]),
},
data: perArr,
symbol: "circle",
symbolSize: 8,
// Line Style
itemStyle: {
color: "#FFFFFF",
borderColor: "rgba(111, 25, 240, 1)",
lineStyle: {
color: "rgba(194, 175, 223,1)",
},
},
},
// Gradient background color
{
type: "bar",
yAxisIndex: 0,
name: nameArr[0],
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(194, 175, 223, 1)",
},
{
offset: 1,
color: "rgba(232, 98, 32, 0)",
},
],
false
),
},
barWidth: 24,
data: aArr,
},
{
type: "bar",
yAxisIndex: 0,
name: nameArr[1],
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(40, 158, 255, 1)",
},
{
offset: 1,
color: "rgba(32, 178, 232, 0)",
},
],
false
),
},
barWidth: 24,
data: bArr,
},
],
};
this.myChart.setOption(option);
// console.log("Before Chart Option", this.myChart.getOption().textStyle);
// Add option usage can be developed.
let optionTest = {
textStyle: {
fontSize: 15,
},
axisLabel: {
color: "#8ccaf4",
},
};
this.myChart.setOption(optionTest);
// console.log("After Chart Option", this.myChart.getOption().textStyle);
},
},
};
</script>
效果如图