carEcharts(time,data,data2){

let Ehcarts=echarts.init(document.getElementById("carEcharts"))

let option={

color:["#1FC9E2","#F6D51D"],

"title": {

"text": "外地车环路分布状态",

x: "4%",

textStyle: {

color: '#fff',

fontSize: '15'

},

subtextStyle: {

color: '#90979c',

fontSize: '12',

},

},

"tooltip": {

"trigger": "axis",

"axisPointer": {

"type": "shadow",

textStyle: {

color: "#fff"

}

},

},

"grid": {

"borderWidth": 0,

textStyle: {

color: "#fff"

}

},

"legend": {

x: '4%',

top: '8%',

left:'right',

// align:"right",

textStyle: {

color: '#90979c',

},

"data": ['已办进京证', '未办进京证']

},

"calculable": true,

"xAxis": [{

"type": "category",

"axisLine": {

lineStyle: {

color: '#90979c'

}

},

"splitLine": {

"show": false

},

"axisTick": {

"show": false

},

"splitArea": {

"show": false

},

"axisLabel": {

"interval": 0,

},

"data":time,

}],

"yAxis": [{

"type": "value",

"splitLine": {

"show": false

},

"axisLine": {

lineStyle: {

color: '#90979c'

}

},

"axisTick": {

"show": false

},

"axisLabel": {

"interval": 0,

},

"splitArea": {

"show": false

},

}],

"series": [{

"name": "已办进京证",

"type": "bar",

"stack": "总量",

"barMaxWidth": 15,

"barGap": "10%",

"itemStyle": {

"normal": {

"color": "rgba(255,144,128,1)",

"label": {

"show": true,

"textStyle": {

"color": "#fff"

},

"position": "inside",

formatter: function(p) {

return p.value > 0 ? (p.value) : '';

}

}

}

// barBorderRadius: 3,

},

"data": data

},

{

"name": "未办进京证",

"type": "bar",

"stack": "总量",

"itemStyle": {

// barBorderRadius: 3,

"normal": {

"color": "rgba(0,191,183,1)",

"barBorderRadius": 0,

"label": {

"show": true,

"position": "inside",

formatter: function(p) {

return p.value > 0 ? (p.value) : '';

}

}

}

},

"data":data2

}

]

}

Ehcarts.setOption(option)

},

数据格式

router.get('/car_count', (ctx, next) => {

ctx.body = Object.assign({}, message, {

time:["二环","三环","四环","五环","六环","监测站"],

data:{

first:[400, 600, 700, 700, 1000],

second:[400,300,200,400,800,300],

}

})

})

调用

$.get({

url:ajaxURL.car_count,

dataType:"json"

}).then((res)=>{

t.carEcharts(res.time,res.data.first,res.data.second)

})

结果

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐