112 条评论分享收藏感谢收起赞同 22 条评论分享收藏感谢收起写回答力导向布局图
事件河流图
主题预览 ，主题定制调试工具
ps:别太依赖代码编辑区，没做本地缓存，页面刷新就没了，建议使用一个本地编辑器编辑主题，只用代码区作为主题定制调试工具。主题写好试试顶部的SaveAsImage（IE8-不支持），会把所有图表合并到一张图中，这是默认样式，期待与我们联系，show出你的主题，让你的设计成为ECharts内置甚至默认主题随时有可能，我们将为您献上一份小礼品同时你的名字将被永留在贡献者名单中。
专题页没做低版本IE兼容性处理，请用IE9+、chrome、safari、firefox或opear等现代浏览器。
by （CSDN开源夏令营）Echarts条形图的Y轴标题的显示问题
<a data-traceid="question_detail_above_text_l&&
你好，想跟你请教个问题：
&&&&& & 请教你一个问题，这种 条形图的Y坐标的标题以下面的方式显示？
&&&&& & 怎么样才能实现？
您好，您实现了吗Echarts条形图实战
最近公司项目要做一个统计图用到了echarts里面的条形图，对于以前就接触过一点echarts的我信心满满，没想到动手的时候才发现问题百出，看来实践真的是检验学习成效的标准。这里有两种条形图，一种横向的一种纵向的。
不管是哪种都要先初始化echarts:
var myChart = echarts.init(document.getElementById('main'));
这里横向和纵向柱状图的配置无非就是x轴和y轴的不同，所以我写了两个配置项:
var optionH = {
color: ['#9BBB59'],
textStyle: {
color: '#aaa',
fontWeight: '600'
tooltip: {
trigger: 'axis',
formatter: "完成进度 : &br/&{b} : {c}%"
toolbox: {
show : true,
feature : {
dataView : {show: false, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
type : 'value',
axisLabel : {
formatter: '{value} %'
interval: 10
type : 'category',
axisLabel:{
interval:0
data: ['']
series: [{
xAxisIndex: 0,
yAxisIndex: 0,
type: 'bar',
barMaxWidth:60,
data: ['']
var optionV = {
color: ['#9BBB59'],
textStyle: {
color: '#aaa',
fontWeight: '600'
tooltip: {
trigger: 'axis',
formatter: "完成进度 : &br/&{b} : {c}%"
toolbox: {
show : true,
feature : {
dataView : {show: false, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
type : 'category',
data: [''],
axisLabel:{
interval:0
type : 'value',
axisLabel : {
formatter: '{value} %'
interval: 10
series: [{
type: 'bar',
barMaxWidth:60,
data: ['']
这个统计图一共有5种角色的区分（市级、区级、学校、班主任、学生）
首先市级的是纵向条形图，x轴为类别数据，y轴为百分比:
function loadOptionByCity(){
myChart.setOption(optionV);
var njmc= $('#staGradeSelect option:selected').val();
var termNo = $('#staTermNo option:selected').val();
url: ctx + '/SCH_STATISTIC_JLYD_Action.a?findCountyStatisticScore',
type: 'post',
"njid" : njmc,
"termNo" :termNo
dataType: 'json',
async: false,
success: function (result) {
var resultCode = result.resultC
var resultMsg = result.resultM
var resultList = result.resultL
var xArray=[];
if (result)
var option = myChart.getOption();
option.series[0].data = [];
option.title[0].text = titleArray[0];
if (resultList.length == 0) {
option.series[0].data = [];
option.xAxis[0].data = []
for (var i = 0; i &resultList. i++) {
option.series[0].data.push(resultList[i].ztwcjd);
xArray.push(resultList[i].qxmc);
option.xAxis[0].data=xA
myChart.setOption(option,true);
error: function ()
alert("不好意思请求失败了");
渲染出来的图表是这样：
区级也是纵向条形图，只不过x轴数据是写死的：
function loadOptionByArea()
myChart.setOption(optionV);
var njid= $('#staGradeSelect option:selected').val();
var termNo = $('#staTermNo option:selected').val();
url: ctx + '/SCH_STATISTIC_JLYD_Action.a?findCountyStatisticScore',
type: 'post',
"qxdm" :qxdmSelf,
"njid" : njid,
"termNo" :termNo
dataType: 'json',
async: false,
success: function (result) {
var resultCode = result.resultC
var resultMsg = result.resultM
var resultList = result.resultL
if (result)
var option = myChart.getOption();
option.series[0].data = [];
option.title[0].text = titleArray[1];
if (resultList.length == 0) {
option.series[0].data = [];
option.xAxis[0].data = ['啊啊','哇哇','啦啦','嘻嘻','呵呵']
var xArray=['啊啊','哇哇','啦啦','嘻嘻','呵呵']
var yArray = [resultList[0].ztwcjd,resultList[0].zgdfjd,resultList[0].zgtbjd,resultList[0].zjtbjd,resultList[0].actbjd];
option.series[0].data=yArray
option.xAxis[0].data=xA
myChart.setOption(option,true);
error: function ()
alert("不好意思请求失败了");
渲染出来的图表是这样：
校级、班主任、学生三个角色都是横向条形图，只不过传的参数和接口地址不一样，所以我封装了一个方法
function loadOption(url,data)
// 使用刚指定的配置项和数据显示图表
myChart.setOption(optionH);
url: ctx + url,
type: 'post',
data: data,
dataType: 'json',
async: false,
success: function (result) {
var resultCode = result.resultC
var resultMsg = result.resultM
var resultList = result.resultL
if (result)
var option = myChart.getOption();
option.series[0].data = [];
option.yAxis[0].data = [];
option.title[0].text = titleArray[2];
if (resultList.length == 0) {
option.series[0].data = [];
option.yAxis[0].data = []
for(var i=0;i&resultList.i++){
option.series[0].data.push(resultList[i].WCJD);
option.yAxis[0].data.push(resultList[i].LABELNAME);
myChart.setOption(option,true);
error: function ()
alert("不好意思请求失败了");
trigger: 'axis',
formatter: "完成进度 : &br/&{b} : {c}%"
提示框触发方式：trigger
tooltip的trigger的值可以有’item’、’axis’。
‘item’:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
‘axis’:坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
提示框的格式：formatter
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）如下图：
工具箱，非常方便，可以条形图折线图相互转换，效果如下图：
toolbox: {
show : true,
feature : {
dataView : {show: false, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
type : 'category',
data: [''],
axisLabel:{
//X轴刻度配置
interval:0
这里需要设置x轴标签的刻度，不然会出现默认刻度单位过大或者是数据标签隔一个显示一个的怪异现象
type : 'value',
axisLabel : {
formatter: '{value} %'
interval: 10
这里需要注意的是我想让y轴的刻度按百分比显示，从10%到100%，间隔为10，用到了神奇的formatter
series: [{
type: 'bar',
barMaxWidth:60,//最大宽度
data: ['']
通过barMaxWidth设置柱子的最大宽度，不然数据少的时候，柱子会特别宽，影响美观
还有一个需要注意的地方，每次渲染图表都让数据置空option.series[0].data = [];不然会出现数据堆叠的怪异现象
ECharts系列 - 柱状图（条形图）实例一
echarts图表——条形图（柱状图）的动态横向显示设置
横向占比条状图
Echarts bar图标怎么显示百分比
分享一个echarts直条状效果图
Echarts 柱形图详解
echarts生成条形统计图【随记】
echarts图表学习之调整条形图的位置
echarts动态生成条形图
没有更多推荐了，echarts 柱状图 上方显示数据问题
<a data-traceid="question_detail_above_text_l&&
& 我想在柱状图上方显示数据，设置itemStyle 显示不出来，而且同样可以显示上方数据的代码贴过来也不能显示出来，帮忙看下，谢谢。
&&&& require.config({ &&&&&&&& packages: [ &&&&&&&& { &&&&&&&&&&&& name: 'echarts', &&&&&&&&&&&& location: 'js/echarts/src', &&&&&&&&&&&& main: 'echarts' &&&&&&&& }, &&&&&&&& { &&&&&&&&&&&& name: 'zrender', &&&&&&&&&&&& location: 'js/zrender/src', // zrender与echarts在同一级目录 &&&&&&&&&&&& main: 'zrender' &&&&&&&& } &&&& ] &&&& });
&&&& // Step:4 require echarts and use it in the callback. &&&& // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径 &&&& require( &&&&&&&& [ &&&&&&&&&&&& 'echarts', &&&&&&&&&&&& 'echarts/chart/bar', &&&&&&&&&&& 'echarts/chart/line' &&&&&&&& ], &&&&&&&& function (ec) { &&&&&&&&&&&& var myChart = ec.init(document.getElementById('chartArea')); &&&&&&&&&&&& option = { &&&&&&&&&&&&&&&& // color:['#0000ff','#ff0000'], &&&&&&&&&&&&&&&& title: { &&&&&&&&&&&&&&&&&&&& text: 'RUNIN/SWDL区' &&&&&&&&&&&&&&&&&&&& // subtext: '纯属虚构' &&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&& tooltip: { &&&&&&&&&&&&&&&&&&&& trigger: 'axis',
&&&&&&&&&&&&&&&&&&&& textStyle: { fontSize: '30px' } &&&&&&&&&&&&&&&& }, &&&&&&&&&&&&&&&& legend: { &&&&&&&&&&&&&&&&&&&& data: ['A/P FPY', 'Yield Goal'],
&&&&&&&&&&&&&&&&&&&& textStyle: { color: '#000000', &&&&&&&&&&&&&&&&&&&&&&&& fontSize: '20px' &&&&&&&&&&&&&&&&&&&& } &&&&&&&&&&&&&&&& }, &&&&&&&&&&&&&&&& toolbox: { &&&&&&&&&&&&&&&&&&&& orient: 'vertical', &&&&&&&&&&&&&&&&&&&& show: true, &&&&&&&&&&&&&&&&&&&& feature: { &&&&&&&&&&&&&&&&&&&&&&&& dataZoom: true, &&&&&&&&&&&&&&&&&&&&&&&& mark: true, &&&&&&&&&&&&&&&&&&&&&&&& dataView: { readOnly: false }, &&&&&&&&&&&&&&&&&&&&&&&& magicType: ['line', 'bar'], &&&&&&&&&&&&&&&&&&&&&&&& restore: true, &&&&&&&&&&&&&&&&&&&&&&&& saveAsImage: true &&&&&&&&&&&&&&&&&&&& } &&&&&&&&&&&&&&&& }, &&&&&&&&&&&&&&&& dataZoom: { &&&&&&&&&&&&&&&&&&&& backgroundColor: '#eee', &&&&&&&&&&&&&&&&&&&& dataBackgroundColor: '#ccc', &&&&&&&&&&&&&&&&&&&& fillerColor: 'rgba(50,205,50,0.4)', &&&&&&&&&&&&&&&&&&&& handleColor: 'rgba(70,130,180,0.8)', &&&&&&&&&&&&&&&&&&&& show: true &&&&&&&&&&&&&&&& }, &&&&&&&&&&&&&&&& calculable: true, &&&&&&&&&&&&&&&& xAxis: [ &&&&&&&& { &&&&&&&&&&&& type: 'category', &&&&&&&&&&&& data: ['第一节课', '第二节课', '第三节课', '第四节课', '第五节课'], &&&&&&&&&&&& axisLabel: { &&&&&&&&&&&&&&&& show: true, &&&&&&&&&&&&&&&& interval: 'auto',
&&&&&&&&&&&&&&&& textStyle: { &&&&&&&&&&&&&&&&&&&& color: '#000000', &&&&&&&&&&&&&&&&&&&& fontFamily: 'verdana', &&&&&&&&&&&&&&&&&&&& fontSize: 20, &&&&&&&&&&&&&&&&&&&& fontStyle: 'normal', &&&&&&&&&&&&&&&&&&&& fontWeight: 'bold' &&&&&&&&&&&&&&&& } &&&&&&&&&&&& } &&&&&&&& }
&&&& ], &&&&&&&&&&&&&&&& yAxis: [ &&&&&&&& {
&&&&&&&&&&&& splitNumber: '5', &&&&&&&&&&&& type: 'value', &&&&&&&&&&&& splitArea: { show: true }, &&&&&&&&&&&& axisLabel: { &&&&&&&&&&&&&&&& show: true, &&&&&&&&&&&&&&&& interval: 'auto', &&&&&&&&&&&&&&&& formatter: '{value} %', &&&&&&&&&&&&&&&& textStyle: { &&&&&&&&&&&&&&&&&&&& color: '#000000', &&&&&&&&&&&&&&&&&&&& fontFamily: 'verdana', &&&&&&&&&&&&&&&&&&&& fontSize: 20, &&&&&&&&&&&&&&&&&&&& fontStyle: 'normal', &&&&&&&&&&&&&&&&&&&& fontWeight: 'bold' &&&&&&&&&&&&&&&& } &&&&&&&&&&&& }
&&&&&&&& } &&&& ], &&&&&&&&&&&&&&&& series: [ &&&&&&&& { &&&&&&&&&&&& name: 'A/P FPY', &&&&&&&&&&&& type: 'bar', &&&&&&&&&&&& itemStyle: { &&&&&&&&&&&&&&&& normal: { &&&&&&&&&&&&&&&&&&&& label: { &&&&&&&&&&&&&&&&&&&&&&&& show: true, &&&&&&&&&&&&&&&&&&&&&&&& textStyle: { &&&&&&&&&&&&&&&&&&&&&&&&&&&& color: '#800080' &&&&&&&&&&&&&&&&&&&&&&&& } &&&&&&&&&&&&&&&&&&&& } &&&&&&&&&&&&&&&& } &&&&&&&&&&&& }, &&&&&&&&&&&& data: [80, 80, 80, 80, 80], &&&&&&&&&&&& barWidth: 50 &&&&&&&& }, &&&&&&&& { &&&&&&&&&&&& name: 'Yield Goal', &&&&&&&&&&&& type: 'bar', &&&&&&&&&&&& data: [90, 90, 90, 90, 90], &&&&&&&&&&&& barWidth: 30 &&&&&&&& } &&&& ] &&&&&&&&&&&& };
&&&&&&&&&&&& myChart.setOption(option); &&&&&&&& } &&&& );
没更新吧？1.3.0才有这个功能，我用你的option直接就出来了
&是版本问题，现在可以了，非常感谢。另外想问一下，模块化导入和单文件引入的知识，两者效果有什么不同？谢谢。
性能优化啊，肯定最后都得压缩合并，就看你自己项目规模，习惯，是你们自己压缩还是用我们压缩好的，功能都一样