版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39581226/article/details/83755746
1.安装echarts
cnpm install echarts -S2.main.js
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts 3.tool.vue
<template>
<div id="Toolrecord" class="box">
<div id="Toolrecordecharts" :style="{height:height,width:width}" class="charts"></div>
</div>
</template>import echarts from "echarts";//作为子组件，此处也得引入
export default {
name: "Toolrecord",
data() {
return {};
},
props: {
height: {
type: String,
default: "15vw"
},
width: {
type: String,
default: "30vw"
}
},
mounted() {
this.draw();
window.addEventListener("resize", () => {
this.chart.resize(); //监听屏幕大小，来刷新画布
});
},
methods: {
draw() {
this.chart = echarts.init(document.getElementById("Toolrecordecharts"));
this.$http.get("../../static/toolrecord.json").then(function(res) {
var serie = [];
for (var i = 0; i < res.body.series.length; i++) {
serie.push({
name: res.body.series[i].name,
type: "bar",
markPoint: {
data: res.body.series[i].markPoint
},
markLine: {
data: res.body.series[i].markLine
},
data: res.body.series[i].data
});
}
this.chart.setOption({
backgroundColor: "transparent",
title: {
text: "刀具记录",
textStyle: {
color: "#ccc"
}
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985"
}
}
},
color: ["#cebc3e", "#b5acd1", "#52558e"],
legend: {
data: res.body.legend,
textStyle: {
color: "#ccc"
},
inactiveColor: "#797578",
bottom: "0px"
},
calculable: true,
xAxis: [
{
type: "category",
data: res.body.xAxis,
axisLine: {
lineStyle: {
color: "#ccc"
}
}
}
],
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#ccc"
}
},
splitLine: {
show: true,
lineStyle: {
color: "#797578"
}
} //去除网格线
}
],
series: serie
});
});
}
}
};以上是最终版本
1.机械版本
import echarts from "echarts";
export default {
name: "Toolrecord",
data() {
return {
option: {
backgroundColor: "transparent",
title: {
text: "刀具记录",
textStyle: {
color: "#ccc"
}
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985"
}
}
},
color: ["#cebc3e", "#b5acd1", "#52558e"],
legend: {
data: [],
textStyle: {
color: "#ccc"
},
inactiveColor: "#797578",
bottom: "0px"
},
calculable: true,
xAxis: [
{
type: "category",
data: [],
axisLine: {
lineStyle: {
color: "#ccc"
}
}
}
],
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#ccc"
}
},
splitLine: {
show: true,
lineStyle: {
color: "#797578"
}
} //去除网格线
}
],
series: [
{
name: "",
type: "bar",
data: [],
markPoint: {
data: []
},
markLine: {
data: []
}
},
{
name: "",
type: "bar",
data: [],
markPoint: {
data: []
},
markLine: {
data: []
}
},
{
name: "",
type: "bar",
data: [],
markPoint: {
data: []
},
markLine: {
data: []
}
}
]
}
};
},
props: {
height: {
type: String,
default: "15vw"
},
width: {
type: String,
default: "30vw"
}
},
created() {},
mounted() {
this.draw();
window.addEventListener("resize", () => {
this.echart.resize(); //监听屏幕大小，来刷新画布
});
},
methods: {
draw() {
this.$http.get("../../static/toolrecord.json").then(function(res) {
this.option.legend.data = res.body.legend;
for (var i = 0; i < res.body.series.length; i++) {
this.option.series[i].name = res.body.series[i].name;
this.option.series[i].data = res.body.series[i].data;
this.option.series[i].markPoint.data = res.body.series[i].markPoint;
this.option.series[i].markLine.data = res.body.series[i].markLine;
}
this.echart = echarts.init(
document.getElementById("Toolrecordecharts")
);
this.echart.setOption(this.option, true);
this.echart.setOption({
xAxis: [
{
data: res.body.xAxis,
}
]
});
});
}
}
};如上methods中，两次setOption();就能显示横坐标辣，否则就是如下情况
最终效果如下：
测试json数据：
{
"legend": ["永利牌", "长春牌", "吉林牌"],
"xAxis": ["WJ110", "WJ114", "WJ113", "WJ116", "WJ109", "WJ119", "wJ107", "WJ180", "WJ112", "WJ133", "WJ115", "WJ888"],
"series": [{
"name": "永利牌",
"data": [
2.0,
4.9,
7.0,
23.2,
25.6,
76.7,
135.6,
162.2,
32.6,
20.0,
6.4,
3.3
],
"markPoint": [{
"type": "max",
"name": "最大值"
},
{
"type": "min",
"name": "最小值"
}
],
"markLine": [{
"type": "average",
"name": "平均值"
}]
}, {
"name": "长春牌",
"data": [2.6,
5.9,
9.0,
26.4,
28.7,
70.7,
175.6,
182.2,
48.7,
18.8,
6.0,
2.3
],
"markPoint": [{
"name": "年最高",
"value": 182.2,
"xAxis": 7,
"yAxis": 183
},
{
"name": "年最低",
"value": 2.3,
"xAxis": 11,
"yAxis": 3
}
],
"markLine": [{
"type": "average",
"name": "平均值"
}]
}, {
"name": "吉林牌",
"data": [2.6,
5.9,
9.0,
26.4,
28.7,
70.7,
175.6,
18.2,
48.7,
18.8,
6.0,
2.3
],
"markPoint": [{
"name": "年最高",
"value": 175.6,
"xAxis": 6,
"yAxis": 176
},
{
"name": "年最低",
"value": 2.3,
"xAxis": 11,
"yAxis": 3
}
],
"markLine": [{
"type": "average",
"name": "平均值"
}]
}
]
}