【Echarts】Echarts常用图表

饼图

 var myChart = echarts.init(document.getElementById('chart-zrzylx-sl'));
        myChart.clear();

        var option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                textStyle: {
                    //图例字体大小
                    fontSize: 10,
                },
                //图例大小
                itemHeight: 10,
                //图例滚动显示
                type: 'scroll',
                //图例纵向显示
                orient: 'vertical',
                //图例位置
                right: 10,
                top: 30,
                bottom: 30,
            },
            series: [
                {
                    name: '自然资源类型：斑块数量',
                    type: 'pie',
                    center: ['40%', '50%'],
                    radius: '50%',
                    data: [    //记录各个城市的斑块数量
					        {name: "武汉市", value: 10},
					        {name: "黄石市", value: 22},
					        {name: "天门市", value: 15},
					        {name: "潜江市", value: 17},
					        {name: "仙桃市", value: 5},
					        {name: "十堰市", value: 90},
					        {name: "宜昌市", value: 46},
					        {name: "襄阳市", value: 44},
					        {name: "鄂州市", value: 67},
					        {name: "荆门市", value: 22},
					        {name: "孝感市", value: 18},
					        {name: "荆州市", value: 32},
					        {name: "神农架林区", value: 55},
					        {name: "黄冈市", value: 54},
					        {name: "咸宁市", value: 33},
					        {name: "随州市", value: 25},
					        {name: "恩施土家族苗族自治州", value: 7},
					    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);

柱状图

var myChart1 = echarts.init(document.getElementById('chart-djdy-mj'));
        myChart1.clear();
        var option = {
            color: ['#4aaad5'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { //柱状图hover时背部阴影
                    type: 'shadow',
                    shadowStyle: {
                        color: 'rgba(52,158,252,0.1)'
                    }
                },
                formatter: "{a} <br/>{b}: {c}(公顷)"
            },
            grid: { //图表距离容器的距离
                top: '12%',
                left: '3%',
                right: '3%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data:  [ "自然保护区"， "河流"， "湖泊"， "自然公园" ],
                axisTick: { //刻度
                    alignWithLabel: true
                },
                axisLabel: {
                    textStyle: {
                        color: '#556a78'
                    },
                    rotate: 30,
                    interval: 0
                },
                axisLine: { //坐标轴样式
                    lineStyle: {
                        fontSize: 12,
                        color: '#4aaad5'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#4aaad5',
                        type: 'dashed'
                    }
                }
            },
            yAxis: {
                name: '登记单元总面积(公顷)',

                axisLine: { //坐标轴样式
                    lineStyle: {
                        fontSize: 12,
                        color: '#4aaad5'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#4aaad5',
                        type: 'dashed'
                    }
                }
            },
            series: [{
                name: '自然资源总面积',
                type: 'bar',
                // barWidth: '15',
                label: {
                    normal: {
                        show: false,
                        position: 'top',
                        color: '#4aaad5'
                    }
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, [{
                                offset: 0,
                                color: '#83bff6'
                            }, {
                                offset: 0.5,
                                color: '#188df0'
                            }, {
                                offset: 1,
                                color: '#188df0'
                            }]
                        ),
                        // shadowBlur: 20,
                        // shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, [{
                                offset: 0,
                                color: '#2378f7'
                            }, {
                                offset: 0.5,
                                color: '#2378f7'
                            }, {
                                offset: 1,
                                color: '#83bff6'
                            }]
                        ),
                        // shadowBlur: 20,
                        // shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                data: [531571320,359956588,280734976,1063824997]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option);