Echart3图越来越强大，最近公司有这样的需求，客户对界面要求比较高，专门设计了几种图，查阅了官网的使用API。算是实现了吧！

背景有方格子的图

    option = {
        title: {
            text: "设备总体健康报表",
            textStyle: {
                color: "#ffffff",
                fontWeight: 'bold'
            },
            left: "10",
            top: '10'
        },
        tooltip: {
            trigger: 'axis'
        },
        color: ['#e8b609', '#e74e54', '#79e4e4', '#29b4ec'],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true,
        },
        legend: {
            right: '30',
            top: '10',
            orient: 'horizontal',
            textStyle: {
                color: '#ffffff'
            },
            icon: 'roundRect',
            data: ['宝山', '东山', '青山', '梅山']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            nameTextStyle: {
                fontSize: '16'
            },
            axisLabel: {
                height: '50',
                textStyle: {
                    color: '#ffffff',
                    fontSize: '16'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'solid'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#ffffff'
                }
            },
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '、十二月']
        },
        yAxis: {
            type: 'value',
            axisLine: true,
            axisLabel: {
                formatter: '{value} %',
                textStyle: {
                    color: '#ffffff'
                }
            }
        },
        series: [
            {
                name: '宝山',
                type: 'line',
                symbolSize: 10,
                data: [30, 33, 34, 33, 42, 35, 34]
            },
            {
                name: '东山',
                type: 'line',
                symbolSize: 15,
                data: [5, 2, 2, 5, 3, 2, 3],
            },
            {
                name: '青山',
                type: 'line',
                symbolSize: 15,
                data: [20, 30, 15, 15, 22, 23, 34],
            },
            {
                name: '梅山',
                type: 'line',
                symbolSize: 15,
                data: [33, 30, 42, 35, 43, 23, 32],
            }

        ],
        graphic: [
            {
                type: 'image',
                id: 'logo',
                right: '11',
                bottom: '28%',
                z: 1000,
                bounding: 'raw',
                style: {
                    image: 'image/shadow.png',
                    width: 945
                }
            }
        ],
    };

有一个背景图的渐变色饼图

     option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        color: ['#e8b609', '#e74e54', '#29b4ec'],
        grid: {
            top: 'top'
        },
        legend: {
            left: 'center',
            top: '30',
            orient: 'vertical',
            textStyle: {
                color: '#ffffff',
                fontSize: '20',
                verticalAlign: 'bottom'
            },
            itemHeight: '50',
            icon: 'rect',
            data: ['335', '310', '234'],
            formatter: function (name) {
                return "指标名称\n" + name;
            }
        },
        graphic: [
            {
                type: 'image',
                left: '32',
                top: 8,
                z: -10,
                bounding: 'raw',
                style: {
                    image: 'image/circle_equipment.png',
                    width: 200,
//                    height: 150,
//                    opacity: 0.4
                }
            }


        ],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['30%', '60%'],
                center: ['22%', '36%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {
                        value: 335,
                        name: '335',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#fcd661'
                                }, {
                                    offset: 1,
                                    color: '#fca81f'
                                }])
                            }
                        }

                    },
                    {
                        value: 310,
                        name: '310',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#48e4c1'
                                }, {
                                    offset: 1,
                                    color: '#15aa97'
                                }])
                            }
                        }
                    },
                    {
                        value: 234,
                        name: '234',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#2cc1ff'
                                }, {
                                    offset: 1,
                                    color: '#148ccb'
                                }])
                            }
                        }
                    }
                ]
            }
        ]
    };

默认展示数据的饼图

    option = {
        title: {
            text: "东山",
            textStyle: {
                color: "#ffffff",
            },
            left: "center",
            bottom: "75"
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        color: ['#e8b609', '#e74e54', '#29b4ec'],
        grid: {
            top: 'top'
        },
        legend: {
            left: 'center',
            bottom: '26',
            orient: 'horizontal',
            textStyle: {
                color: '#ffffff'
            },
            icon: 'circle',
            data: ['335', '310', '234'],



        },
        graphic: [
            {
                type: 'image',
                id: 'logo',
                right: 11,
                top: 8,
                z: -10,
                bounding: 'raw',
                style: {
                    image: 'image/circlebg.png',
                    width: 200,
//                    height: 150,
//                    opacity: 0.4
                }
            }


        ],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['50%', '36%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center',
                        formatter: function (params) {
//                            if (params.name == "335") {
//                            }
//                            return "";
//                        return params.value + '\n' + params.name;
                        },
                    },

                    emphasis: {
                        show: false,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }

                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {value: 335, name: '335'},
                    {value: 310, name: '310'},
                    {value: 234, name: '234'}
                ]
            }, {
                name: '完成处理',
                type: 'pie',
                clockWise: false,
                hoverAnimation: true,
                radius: ['50', '50'],
                center: ['50%', '36%'],
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                tooltip: {
                    show: false
                },
                data: [
                    {
                        label: {
                            normal: {
                                formatter: '879',
                                textStyle: {
                                    color: '#000000',
                                    fontSize: 46,
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    }
                ]
            }
        ]
    };