echarts横向柱状图

1、效果例子

https://gallery.echartsjs.com/editor.html?c=xByfdMz7mM

2、Html部分给该柱状图一个id

<div id="vehicleUseRate" class="charts" style="position: relative"></div>

3、js部分渲染代码，数据从后台返回


<script>
$(function () {
var vehicleUseRateChart = echarts.init(document.getElementById('vehicleUseRate'));
vehicleUseRateChart.showLoading();
$.ajax({url: 'driver/vehicleUseRate.do',data: {name: $("#beginDate").val()},dataType: 'json',type: 'post',success: function createBar(data) {vehicleUseRateChart.hideLoading();markers = data;var ccOption = {title: {text: $.i18n.prop('UnitHours'),textStyle: {fontWeight: '1px',color: '#000000'},x: '5%',y: '4%'},tooltip: {trigger: "axis",axisPointer: {type: 'shadow'}},color: ['#F19149'],legend: {itemWidth: 10,itemHeight: 8,data:'横向排序数据',textStyle: {fontWeight: '1px',color: '#000000'},x: '72%',y: '4%'},grid: {top: '13%',bottom: '14%',backgroundColor: 'rgba((255,255,255,0.1)',left: '25%',width: '60%',heigth: '55%'},textStyle: {decoration: 'none',fontFamily: 'Arial, Verdana, sans-serif',fontFamily2: '微软雅黑',fontSize: 12,fontStyle: 'normal',fontWeight: 'normal'},toolbox: {feature: {mark: {show: false},dataView: {show: false,readOnly: false},magicType: {show: false,type: ["bar"]},restore: {show: false},saveAsImage: {show: false}}},calculable: true,xAxis: [{type: "value",name: "",axisLabel: {show: false,interval: 'auto',formatter: '{value}'},axisLine: {show: false,lineStyle: {color: '#3FC79B',width: 1}},axisTick: {show: false},splitLine: {show: false,lineStyle: {color: ['#50FEC1'],width: 0.2,type: 'solid'}}}],yAxis: [{type: "category",data: data.xArray,inverse: true,//不加这个属性数据排序会倒过来name: "",axisLabel: {inteval: 0,rotate: 0},axisLine: {show: false,lineStyle: {color: '#000000',width: 1}},axisTick: {show: false}}],series: [{symbol: "none",symbolSize: 8,name: '横向排序数据',type: "bar",barMaxWidth: 30,barWidth: 12,data: data.result,markPoint: {symbol: 'pin',symbolRotate: '100',position: '100%',itemStyle: {normal: {label: {show: true,position: 'top',textStyle: {color: 'black',fontSize: 14}}}},symbolSize: [1, 1],symbolOffset: [30, 15]},itemStyle: {normal: {barBorderRadius: 0,color: new echarts.graphic.LinearGradient(0, 0, 1, 0,[{offset: 0, color: '#4519E9'},{offset: 0.3, color: '#644FFF'},{offset: 0.6, color: '#2FD4FD'},{offset: 1, color: '#2FD4FD'}])}}}]};window.addEventListener("resize", function () {vehicleUseRateChart.resize();});vehicleUseRateChart.off('click');vehicleUseRateChart.on('click', function (param) {showVehicleRunDetailTime(data.forkliftIds[param.dataIndex], data.accountNumbers[param.dataIndex]);});vehicleUseRateChart.setOption(ccOption);}
});
}</script>

echarts横向柱状图相关推荐

echarts——横向柱状图
功能描述全屏横向柱状图从小到大排序,每次显示5条,每3秒切换循环显示鼠标移入停止切换,鼠标移出继续切换柱状图组件源码 <template><div class="w ...
echarts横向柱状图单个柱子设置警戒线，超过警戒线为渐变蓝色，没超过为渐变红色
效果图如下话不多说,直接上代码.  <template><v-chart cl ...
Echarts横向柱状图：叠加、堆叠(stack)以及点击事件
html <div class="box" id="echartModel" style="background-color: #191e3e; ...
echarts实现饼图及横向柱状图的绘制
项目中需要绘制饼图,因此简单学习了下echarts的基本使用. head中引入js文件: <script src="/static/frame/echarts/echarts.min. ...
echarts（横向柱状图和grid）
场景最近在做知识图谱的时候,右侧弹窗需要有数据统计功能,大概UI如下图,当时想到的是横向柱状图来实现,目前的效果与UI的不同是后面统计的数量显示的位置.后来经其他前端同事启发,他是用进度条来实现的, ...
echarts横向渐变柱状图，顶部带scatter,effectScatter,背景色
1.echarts横向渐变柱状图,顶部带scatter,effectScatter,背景色 (代码和效果如下) <template> <div class="chart&q ...
【Echarts】中国地图、堆叠图、横向柱状图
封装一个监听窗口变化,自适应图像大小的混入对象: 混入对象:一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. chart ...
vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
堆叠横向柱状图顶部显示数值和
效果图不想写太多过不了审核下面代码 // num num1 num2 在全局定义 let num = 0 option = {tooltip: {trigger: "axis" ...
用Java制作左右横向柱状图_横向柱状图
Echarts绘制横向柱状图(圆角+渐变) var myChart = echarts.init(document.getElementById('main'));//初始化数据 var catego ...

echarts横向柱状图

echarts横向柱状图相关推荐

最新文章

热门文章