echars3

echars3

1. 修改背景
2. 修改图例颜色
3. 修改坐标轴颜色,文字颜色
4. 修改折线颜色
5. 切换折线图和柱形图
6. 修改工具图标颜色，文字颜色
7. 修改底部网格颜色

var billChar = echarts.init(document.getElementById('billCharbox'));

            billoptions = {
                color: ['#99ccff', '#ffcc00'],//4
                backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#0099ff' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#0099ff' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }//1

                ,
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['2016年', '2017年'],
                    textStyle: {
                        color: "#fff"
                    }//2
                },
                toolbox: {
                    show: true,
                    iconStyle: {
                        normal: {
                            borderColor: "#fff"//7.图标
                        },
                        emphasis: {
                            color: "#fff"//7.文字
                        }
                    },//6
                    feature: {
                        dataView: {
                            readOnly: false
                        },
                        magicType: {
                            type: ['bar']//5
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        textStyle: {
                            color: "#fff"
                        }
                    },//3
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    },//3
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    type: 'value',

                    axisLabel: {
                        textStyle: {
                            color: "#fff"
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 元'
                    },
                    splitLine: {
                        show: "true",
                        lineStyle: {
                            color: ['rgba(255,255,255,0.3)']
                        }
                    }//7
                },
                series: [{
                    name: '2016年',
                    type: 'line',
                    data: [320, 332, 301, 334, 390, 330, 320, 321, 457, 578, 121, 454],
                    markPoint: {
                        data: [{
                            type: 'max',
                            name: '年大值'
                        }, {
                            type: 'min',
                            name: '年小值'
                        }]
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    }
                }, {
                    name: '2017年',
                    type: 'line',
                    data: [120, 132, 101, 134, 90, 230, 210, 120, 230, 89, 151, 121],
                    markPoint: {
                        data: [{
                            type: 'max',
                            name: '年大值'
                        }, {
                            type: 'min',
                            name: '年小值'
                        }]
                    },
                    markLine: {
                        data: [{
                                type: 'average',
                                name: '平均值'
                            },

                        ]
                    }
                }]
            };

            billChar.setOption(billoptions);