自己模拟的数据用来测试：
{
"data":[
{
"work_time": "2000",
"off_time": "230",
"mark1": "Monday"
},
{
"work_time": "2200",
"off_time": "256",
"mark1": "Tuesday"
},
{
"work_time": "3200",
"off_time": "190",
"mark1": "Wednesday"
},
{
"work_time": "2654",
"off_time": "196",
"mark1": "Thursday"
},
{
"work_time": "1999",
"off_time": "460",
"mark1": "Friday"
}
]
}{
"data":[
{
"off_time": "111"
},
{
"off_time": "222"
},
{
"off_time": "333"
},
{
"off_time": "444"
},
{
"off_time": "555"
}
]
}test:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stacked-Bar</title>
<script src="../vueIview/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="echart2.css">
<link rel="stylesheet" href="../vueIview/iview.css">
<script type="text/javascript" src="../vueIview/vue.min.js"></script>
<script src="../vueIview/iview.min.js"></script>
<script src="../vueIview/echarts.js"></script>
</head>
<body>
<div id="aaa">
<i-button @click="aaa">出来吧</i-button>
<i-button @click="bbb">切换数据1</i-button>
<i-button @click="ccc">切换数据2</i-button>
<i-button @click="ddd">切换加载数据</i-button>
<div id="main3" style="width: 1000px;height: 600px;"></div>
</div>
<script>
var Main={
data(){
return{
data1:[],
data2:[],
data3:[],
}
},
created:function () {
let yk=this;
yk.downLoad("../echart/tsconfig.json",function (data) {
yk.data1.splice(0);
yk.data2.splice(0);
yk.data3.splice(0);
for(let i=0;i<data.length;i++){
yk.data1.push(data[i].work_time);
yk.data2.push(data[i].off_time);
yk.data3.push(data[i].mark1);
}
});
console.log(this.data1)
console.log(this.data2)
console.log(this.data3)
},
methods:{
// GET获取数据
downLoad:function(url1,callback) {
$.ajax({
type:"GET",
dataType:"JSON",
url:url1,
success:function (json) {
let data = json.data;
callback(data);
}
})
},
bbb:function () {
this.data1=[55,66,77,88,99];
this.picture();
},
ccc:function () {
this.data2=[22,33,5,9,15];
this.picture();
},
ddd:function () {
let yk=this;
yk.downLoad("../echart/package.json",function (data) {
yk.data1.splice(0);
for(let i=0;i<data.length;i++){
yk.data1.push(data[i].off_time);
}
})
setTimeout(function () {
yk.picture();
},500)
},
aaa:function(){
this.picture();
},
picture:function () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main3'));
var option1 = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['上岗时间', '离岗时间']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
// data: ['周一','周二','周三','周四','周五','周六']
data:this.data3,
},
series: [
{
name: '上岗时间',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data:this.data1,
// data: [320, 302, 301, 334, 390, 330]
},
{
name: '离岗时间',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data:this.data2,
// data: [120, 132, 101, 134, 90, 230]
},
// {
// name: '联盟广告',
// type: 'bar',
// stack: '总量',
// label: {
// normal: {
// show: true,
// position: 'insideRight'
// }
// },
// data: [220, 182, 191, 234, 290, 330, 310]
// },
// {
// name: '视频广告',
// type: 'bar',
// stack: '总量',
// label: {
// normal: {
// show: true,
// position: 'insideRight'
// }
// },
// data: [150, 212, 201, 154, 190, 330, 410]
// },
// {
// name: '搜索引擎',
// type: 'bar',
// stack: '总量',
// label: {
// normal: {
// show: true,
// position: 'insideRight'
// }
// },
// data: [820, 832, 901, 934, 1290, 1330, 1320]
// }
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option1);
}
}
};
var Component=Vue.extend(Main);
new Component().$mount("#aaa");
</script>
</body>
</html>运行结果：
