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)

})

结果

echarts 如何使柱状图左右展示_echarts 柱状图展示数据相关推荐

  1. echarts河北省json文件最新的_echarts地图边界数据的实时获取与应用,省市区县多级联动【附最新geoJson文件下载】...

    首先,来看下效果图 前段时间给公司弄了一套基于echarts map的地图数据展示的平台,开发过程中发现百度官方已经不提供地图下载了,于是只能期望能在网上搜到哪位大佬帮忙收集的json文件.找是找到了 ...

  2. echarts如何获取后端的值_Echarts 获取后台数据 使用后台数据展示 柱形图

    后台数据要以json格式返回 页面:引用echarts.js , 然后data以ajax的数据请求并返回 String path = request.getContextPath(); String ...

  3. Echarts 柱状图横向展示和竖向展示

    第021个 点击查看专栏目录 本示例是显示柱状图,分别是横向展示和纵向展示.关键是X轴和Y轴的参数互换. 文章目录 横向示例效果 横向示例源代码(共81行) 纵向示例效果 纵向示例源代码(共81行) ...

  4. echarts 柱状图圆柱_Echarts 柱状图配置详解

    1.基本柱状图 // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 're ...

  5. echarts实现2d柱状_堆叠柱状图

    介绍 堆叠柱状图是柱状图的扩展,不同的是,柱状图的数据值为并行排列,堆叠柱图则是一个个叠加起来的.它可以展示每一个分类的总量,以及该分类包含的每个小分类的大小及占比,因此非常适合处理部分与整体的关系. ...

  6. ECharts官方文档及常用组件 柱状图联动

    ECharts官方文档及常用组件 柱状图联动 导入js包 <!DOCTYPE html> <html><head><meta charset="ut ...

  7. #18 可视化基础4-簇形柱状图、百分比堆积柱状图、并列子图

    目录 簇形柱状图 「不指定x轴和y轴数据」 plot.bar() 「不指定x轴和y轴数据」 plot.bar("指定为x轴的columns",["指定为y轴的column ...

  8. 迪赛智慧数——柱状图(多色柱状图):十大高薪行业

    效果图 从行业看,基金/证券/期贷/投资行业以12389元位列十大高薪行业榜首:能源/矿产/采掘/冶炼位列至第二位,薪酬水平为11281元/月:网络游戏行业为列第三,薪酬水平为11238元/月. 通信 ...

  9. 多色柱状图用不同柱体颜色反映数据的差异

    多色柱状图它的适用场合是二维数据集(每个数据点包括两个值x和y),可以多个维度需要比较.多色柱状图属于柱状图的一种,利用柱子的高度和不同柱子颜色来反映数据的差异.肉眼对高度差异与色彩差异很敏感,辨识效 ...

最新文章

  1. 搜狗分身技术再进化,让AI合成主播“动”起来
  2. Netty 入门示例
  3. 用java智能锁远程,从生产者-消费者模型了解线程、同步、锁(java)
  4. java之hibernate之基于外键的一对一单向关联映射
  5. 用iptables实现G1手机cmwap代理上http网站[转]
  6. 平稳序列的预测和拟合之模型优化
  7. android 仿ios三级联动,仿iOS的PickerView控件,有时间选择和选项选择并支持一二三级联动效果...
  8. DP学习之USACO货币系统
  9. [树莓派] : 如何用树莓派利用摄像头进行简单的人脸识别【how to use IR camera +raspberrypi 3b+ in python】
  10. mysql gtids_MySQL GTIDs(global transaction identifiers)
  11. 开源项目9GAG源码解析与Material改造(三)
  12. android 通过adb命令控制wifi开关
  13. Objective-C的方法替换
  14. “华为“和“荣耀”区别日益明显,荣耀传递潮流价值观
  15. 修改Listen 1源码的一点心得
  16. Android自定义View-一个可可爱爱的波浪特效
  17. 深入理解计算机系统CSAPP复习
  18. 金钩钓鱼java代码_金钩钓鱼
  19. 烈风马德里同java_特斯拉94跟这款烈风马德里哪个好一点?
  20. MATLAB将mif文件转换成coe文件(原创)

热门文章

  1. 某日是当前年的第几天
  2. eclipse 的快捷键
  3. ASP.NET页面传值的几种方式
  4. Java异常机制及异常处理建议
  5. pytorch 常用问题解决
  6. 解决“SSL handshake failed“问题
  7. 关于MySQL连接Navicat Premium 12失败的解决方法
  8. 双向LSTM在时间序列异常值检测的应用
  9. 数据库异常 :java.sql.SQLException: Access denied for user ‘root‘@‘localhost‘ (using password: YES)
  10. JQuery .each()向后