先看两张图
图中柱图只需要设置series中的坐标系属性barWidth就可以，
这种图柱状图，折叠柱状图都适应
* 堆积柱状图
* @param xaxisdata x轴：标签（数组）
* @param serieszs 柱状图图数据（数组）
* @param seriesyx 柱状图图数据（数组）
function drawDJZZT(xaxisdata,serieszs,seriesyx){
var myChart = echarts.init(document.getElementById('main1'));
myChart.setOption({
tooltip : {
trigger : 'axis',
showDelay : 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
axisPointer : {
// 坐标轴指示器，坐标轴触发有效
type : 'shadow'
// 默认为直线，可选为：'line' | 'shadow'
data:['做市', '协议']
xAxis : [{
type : 'category',
data : xaxisdata,
axisLabel:{
textStyle:{
color:"#222"
yAxis : [{
type : 'value'
series : [
name:'做市',
type:'bar',
stack: '总量',
/*itemStyle : { normal: {label : {show: true, position: 'insideTop',textStyle:{color:'#000'}}}},*/
data:serieszs
name:'协议',
type:'bar',
stack: '总量',
barWidth : 30,//柱图宽度
/*itemStyle : { normal: {label : {show: true, position: 'insideTop',textStyle:{color:'#000'}}}},*/
data:seriesyx
//console.log(data);
var xaxisdata = [];//月份
var serieszs = [];
var seriesyx = [];
var year = new Date().format("yyyy");
for(var i=(data.list.length-1);i&=0;i--){
var monthDate = data.list[i].month_
//if( year == monthDate.substring(0,4)){
//xaxisdata.push(monthDate.substring(4)+"月");
xaxisdata.push(monthDate.substring(0,4)+"年"+monthDate.substring(4)+"月");
serieszs.push(data.list[i].zszrmygpsl);
seriesyx.push(data.list[i].xyzrmygpsl);
drawDJZZT( xaxisdata, serieszs, seriesyx);
阅读(...) 评论()当前位置： >
echart图表控件配置入门(二)常用图表数据动态绑定
时间： 15:21
作者:web369
上一节 《echart图表控件配置入门(一)》介绍了echarts图表控件的入门配置，使开发人员可以快速搭建出一个静态的图表。但是在实际开发过程这还是不够的，不可能所有的图表控件都是静态数据。决大部份图表是需要读取后台大量的数据时行可视化展示。图表较区表格形式的数据在可视化方面是有一定的优势。能使用户可以快速看出数据存在的问题、趋势、比较分析。因为人类对图表中的颜色、大小、形状更加敏感。
现在分别对折线图、柱状图、饼图、中国地图四类图表的数据绑定进行详细的介绍。echarts中其它的图表方法都差不多，只要了解官方的demo，按照指定的数据结构进行解析都能很方便的得到想要的结果；
echarts中提供了setOption、setSeries两个方法可以对图表的相关数据和属性进行动态设置，setOption一定要在setSeries之前设置；
var myChart = ec.init(document.getElementById('div1'));
var ecConfig = require('echarts/config');
var option = {
text: '标题',
x:"center"
tooltip: {
trigger: 'axis'
y:"bottom"
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
type: 'category',
type: 'value'
series: []
option中的属性可以通过对象属性的方式获取设置；例如以上代码中，
option.legend.data=["xx","xx"] 可以通过这种方法设置对应属性的值
option.title.text="改变标题";//改变标题属性
option.xAxis[0]["data"]=[];//改变坐标值
myChart.setOption(option);//设置图表对象的所有参数属性
myChart.setSeries(seriesData);//设置图表对象的数据集合
通过后台交互数据肯定会有一定的延迟，这时最好能有一个友好载入提示，echarts提供showLoading方法
// 载入动画提示
myChart.showLoading({
下一篇：没有了}