Echarts实例

//****************************************************************** abc1
//初始化一个Echarts对象,main
   var MyEcharts = echarts.init(document.getElementById('Echarts_01'));
  
   var option = {
    legend:{
    x:'370px',
    y:'35px',
    data:['所在区域']
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}：{c}人'
    },
    grid: {
        left: '6%',
        right: '2%',
        bottom: '0%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['吴泾', '工业区',
            '七宝', '虹桥',
            '江川路'
        ],
        axisTick: {
            show: false
        }
    },
    yAxis: {
        name: '人数（人）',
        nameLocation: 'end',
        nameGap: 20,
        axisTick: {
            show: false
        }
    },
    series: [{
        name:'所在区域',
        type: 'bar',
        itemStyle: {
                    normal: {
　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
　　　　　　　　　　　　　　//以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: 'top',
//                             formatter: '{c}'
                            formatter: '{b}\n{c}'
                        }
                    }
                },
        data: [56, 52, 23, 32, 26],
        barMaxWidth: '40px',
        label: {
          normal: {
              show: true,
              position: 'top',
              formatter: '{c}'
          }
      }
    }]
};
  
   // 使用刚指定的配置项和数据显示图表。
MyEcharts.setOption(option);

//******************************************************************abc2

//初始化一个Echarts对象,main
   var MyEcharts1 = echarts.init(document.getElementById('Echarts_02'));
  
   var option1 = {
    grid: {
        left: '1%',
        right: '7%',
        top: '8%',
        height: 100, //设置grid高度
        containLabel: true
    },
    xAxis: [{
        type: 'value',
        interval : 20,
        axisTick: {
            show: false
        }
    }],
    yAxis: [{
        type: 'category',
        axisTick: {
            show: false
        },
        data: ['农业', '非农'],
        inverse:'true', //排序
      
    }],
    series: [{
        type: 'bar',
        barMaxWidth: '40px',
        label: {
            normal: {
                show: true,
                position: 'right'
            }

        },
        data: [8.3910, 57.8210]
    }]
};
  
   // 使用刚指定的配置项和数据显示图表。
MyEcharts1.setOption(option1);

//******************************************************************abc3

//初始化一个Echarts对象,main
   var MyEcharts2 = echarts.init(document.getElementById('Echarts_03'));
  
   var option2 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        padding:0,
        itemWidth:'20',
        itemHeight: '10',
        x: 'right',
        y: 'bottom',
        data:['本科及以上','大专','高中及三校','初中及以下','不明']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            selectedMode: 'single',
            label: {
                normal: {
                    position: 'center'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            }
        },
        {
            name:'访问来源',
            type:'pie',
            radius: ['30%', '40%'],
            data:[
                {value:14, name:'本科及以上'},
                {value:12, name:'大专'},
                {value:11, name:'高中及三校'},
                {value:10, name:'初中及以下'},
                {value:10, name:'不明'}
            ]
        }
    ]
};
  
   // 使用刚指定的配置项和数据显示图表。
MyEcharts2.setOption(option2);

//******************************************************************abc4

//初始化一个Echarts对象,main
   var MyEcharts3 = echarts.init(document.getElementById('Echarts_04'));
  
   var option3 = {
    title: [{
        text: '男性',
        right: "28%",
        top: 0,
        textStyle: {
            color: "#000",
            fontSize: 14,
            fontWeight: 'normal'
        }
    }, {
        text: '女性',
        left: "28%",
        top: 0,
        textStyle: {
            color: "#000",
            fontSize: 14,
            fontWeight: 'normal'
        }
    }],
    xAxis: [{
        type: 'value',
        position: 'button',
        silent: true,
        axisLine: {
            onZero: true
        },
        splitArea: {
            show: false
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#006486',
                width: 1,
                type: 'dashed'
            }
        },
        interval: 5,
        axisLabel: {
            formatter: function(param) {
                if (param > 0) {
                    return param
                } else {
                    return -param
                }
            }
        }
    }],
    yAxis: [{
        axisTick: {
            show: false
        },
        data: ['16-25周岁', '26-35周岁', '36-45周岁', '46-60周岁']
    }],
    grid: {
        left: '3%',
        right: '4%',
        top: '10%',
        height: 180, //设置grid高度
        containLabel: true
    },
    tooltip : {
        trigger: 'axis',
        formatter: '{b0}: {c0}<br />{b1}: {c1}'+-1,
        axisPointer : {          
            type : 'shadow'      
        }
    },
    series: [{
            name:'女性',
            type:'bar',
            stack: '总量',
            data:[12, 13, 14, 13]
        },
        {
            name:'男性',
            type:'bar',
            stack: '总量',
            barMaxWidth: '40px',
            data:[-12, -13, -10, -13]
        }]
};
  
   // 使用刚指定的配置项和数据显示图表。
MyEcharts3.setOption(option3);




//初始化一个Echarts对象,main
    var MyEcharts = echarts.init(document.getElementById('Echarts_01'));
   
var option = {
//提示框组件
    tooltip: {
    //触发类型
        trigger: 'axis',
        //指示器
        axisPointer: {
            type: 'shadow'
        },
       //提示悬浮文字
        formatter: "{a} <br/>{b} : {c}"
    },
    legend: {
        data: ['2016年']
    },
    grid: {
        left: '3%',
        right: '5%',
        bottom: '5%',
        top:'2%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        name:'人数',
        nameLocation:'end',
        position:'top',
        //去掉，坐标尺度
        axisTick: {
            show: false
        },
        axisLabel: {
            interval: 0,
            formatter: '{value}',
        }
    },
    yAxis: {
        type: 'category',
        name:'单位名称                         ',
        nameLocation:'start',
        axisTick: {
            show: false
        },
        inverse:'true', //排序
        data: ['万达信息股份有限公司',
            '中国移动股份有限公司',
            '上海悦才服务有限公司',
            '万达集团',
            '上海正田有限公司',
            '上海好璃奥有限公司',
            '海悦才服务有限公司',
            '万达集团',
            '上海扶正有限公司',
            '海悦才服务有限公司'
        ]
    },
    series: [{
        name: '2016年占比',
        type: 'bar',
        itemStyle: {
                    normal: {
　　　　　　　　　　　　　　 //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: '#26C0C0'
                    }
                },
        data: [42, 36, 35, 28, 21, 20, 15, 15, 5, 2]
    }]
};

// 使用刚指定的配置项和数据显示图表。
        MyEcharts.setOption(option);