vue 專案使用echarts非同步載入,xAxis座標軸不顯示
阿新 • • 發佈:2018-11-19
1.安裝echarts
cnpm install echarts -S
2.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": "平均值"
}]
}
]
}