Echarts-柱形图

灰太狼 2023-10-17 17:57 23阅读 0赞

var clyyqst =\{  
initAction:function()\{  
/\*$('.menuItem').removeClass('menuSelected');  
$('.menuItem').eq(4).addClass('menuSelected');\*/  
clyyqst.initChart();  
\},  
initChart:function()\{

var chartOne = echart.init(document.getElementById('chartOne'));

var dataOne=\[\];  
$.ajax(\{  
async : false,  
type: "POST",  
url: "clyyqs/qymc", //企业名称top10  
dataType: 'json',  
success: function (data) \{  
for(var i in data.qymcs)\{  
dataOne.push(data.qymcs\[i\])  
\}  
\}  
\});  
var legendOne=\[\];  
var seriesOne=\[\];  
$.each(dataOne,function (i,val) \{  
legendOne.push(val.QYMC);  
seriesOne.push(val.MC);  
\});  
var optionOne=\{  
tooltip: \{  
trigger: 'item',  
formatter: "\{b\}: \{c\}"  
\},  
grid:\{  
x:70,  
y:45,  
x2:50,  
y2:80,  
\},  
xAxis: \{  
data: legendOne,  
axisLine:\{  
lineStyle:\{  
color:'\#053b4c'  
\}  
\},  
axisTick:\{  
show:false  
\},  
axisLabel: \{  
interval:0,  
rotate:30,  
textStyle: \{  
color: '\#0F0F0F'  
\}  
\},  
splitLine:\{  
show:false  
\}  
\},  
yAxis: \{  
axisLine:\{  
show:false,  
lineStyle:\{  
color:'\#193b4e'  
\}  
\},  
axisTick:\{  
show:false  
\},  
axisLabel: \{  
textStyle: \{  
color: '\#0F0F0F'  
\}  
\},  
splitLine:\{  
lineStyle:\{  
color:'\#053b4c'  
\}  
\}  
\},  
color:\['\#41bca0'\],  
series: \[  
\{  
type: 'bar',  
barWidth:'46',  
itemStyle: \{  
normal: \{  
color: function(params) \{  
var colorList = \['\#41bca0','\#2a9abf','\#696daa','\#f2bd32','\#ff433d','\#B8860B','\#8B8B00','\#7EC0EE','\#458B00','\#B0E2FF'\];  
return colorList\[params.dataIndex\]  
\}  
\}  
\},  
data:seriesOne  
\}  
\]  
\};  
chartOne.setOption(optionOne);

\}

ajax传入数据：\{"yyfwss":\[\{"MC":6774,"YYFWSMC":"湖北天凯风林电子有限公司"\},\{"MC":3327,"YYFWSMC":"武汉金飞田通信技术有限公司"\},\{"MC":2482,"YYFWSMC":"湖北中寰卫星导航通信有限公司"\},\{"MC":1741,"YYFWSMC":"湖北中交兴路信息科技有限公司"\},\{"MC":1616,"YYFWSMC":"湖北天盾电子技术有限公司"\},\{"MC":725,"YYFWSMC":"湖北航通北斗科技有限公司"\},\{"MC":676,"YYFWSMC":"湖北泰跃卫星技术发展股份有限公司"\},\{"MC":655,"YYFWSMC":"武汉长江通信智联技术有限公司"\},\{"MC":640,"YYFWSMC":"武汉中瀚科技有限公司"\},\{"MC":496,"YYFWSMC":"浙江道为尔科技有限公司武汉分公司"\}\]\}![20180126105604887][]

[20180126105604887]: https://img-blog.csdn.net/20180126105604887

发表评论取消回复

表情：

评论列表（有 0 条评论，23人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts-柱形图

var clyyqst =\{ initAction:function()\{ /\$('.menuItem').removeClass('menuSelected')

灰太狼/ 2023年10月17日 17:57/ 0 赞/ 24 阅读

相关 echart 柱形图和折线图合并

html部分 <div id="lineAndBar" style="width:1000px; height:320px"></div> js部分

桃扇骨/ 2023年02月22日 05:06/ 0 赞/ 31 阅读

相关 Echarts 之bar 柱形图

实现步骤：一、引入Echars > npm install echarts 二、main.js中导入 // 图表--插件 import e

电玩女神/ 2023年01月19日 13:51/ 0 赞/ 46 阅读

相关 echarts热力背景图_echarts柱形图设置背景图片

\`\`\` option = \{ xAxis: \{ type: 'category', data: \['Mon', 'Tue', 'Wed', 'Thu', '

不念不忘少年蓝@/ 2022年12月31日 08:29/ 0 赞/ 197 阅读

相关 echarts 修改柱形图形状新增柱形图堆叠效果

效果图 ![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2022年12月05日 00:51/ 0 赞/ 272 阅读

相关 echarts柱图分组显示(簇状柱形图)

> 需求：设计echarts柱图，相同类型数据放在一起，使用不同背景色分割 > > 所用属性：yAxis/xAxis.splitArea > > splitAre

不念不忘少年蓝@/ 2022年10月24日 11:55/ 0 赞/ 484 阅读

相关 Echarts横向叠加柱形图

带有图例的横向柱形图数据获取的时候每一个柱形图都要单独获取，具体代码如下： option ={ tooltip: {

浅浅的花香味﹌/ 2022年05月15日 12:24/ 0 赞/ 463 阅读

相关 Echarts普通横纵坐标柱形图

根据横纵坐标来设置柱形图具体代码如下 option = { color: ['009CFF'], legend:

冷不防/ 2022年05月15日 12:17/ 0 赞/ 328 阅读

相关 echart 柱形图去掉网格、边线

去掉网格加上splitLine xAxis : [ { splitLine:{

我不是女神ヾ/ 2021年09月28日 11:12/ 0 赞/ 2025 阅读

相关 Echarts之柱形图

需要引入 <script src="js/jquery.js"></script> <script src="js/echarts.js"></script>

冷不防/ 2021年09月17日 05:28/ 0 赞/ 445 阅读