echarts常用说明

import { Injectable } from ‘@angular/core‘;
//模板option通用
let fff7 = ‘#fff‘; //字体统一颜色rgba(255,255,255,0.7)
let fs = 14; //图表统一字体大小
let COLOR = [‘#FBA3BC‘, ‘#0C8AEB‘, ‘#2EEA07‘, ‘#D74D0A‘, ‘#BE8EDE‘, ‘#66cccc‘, ‘#ff6666‘, ‘#cc3399‘, ‘#499FD9‘]; //主体颜色
//let COLOR = [‘#8cc546‘, ‘#b3d3f0‘, ‘#f39e7a‘, ‘#f34d2f‘, ‘#42a3f5‘];
let toolboxColor = [‘#fff‘, ‘#fff‘, ‘#fff‘]; //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
let titlestyle = {
    fontSize: 14,
    fontWeight:400,
    color: fff7
}; //标题样式
let AxisColor = ‘#0F495C‘; //#204f81 轴的统一颜色值
let axisTick = { // 坐标轴小标记
    show: true, // 属性show控制显示与否，默认不显示
    interval: ‘auto‘,
    inside: false, // 控制小标记是否在grid里
    length: 6, // 属性length控制线长
    lineStyle: { // 属性lineStyle控制线条样式
        color: AxisColor,
        width: 2
    }
};
let dataViewIshow = true; //是否显示数据视图
let ItemStyle = {
    normal: {
        label: {
            show: true,
            position: ‘top‘ ////insideTop(柱状内部靠顶部)，insideBottom(柱状内部靠下方)，insideRight(柱状内部靠右边)，insideLeft(柱状内部靠左边)  inside(自适应，柱状内部中央),top（柱状外的正上方）,bottom(柱状外的正下方)，left(柱状外的左边)，right(柱状外的右边)　　     }
    }
}; //formatter: ‘{c}%‘, //柱形图或者线形图上方展示数值
let yAxisSplitLine = {
    show: true,
    lineStyle: {
        color: [AxisColor],
        width: 1,
        type: ‘solid‘
    }
}; //设置公共网格线

let BackGroundColor = ‘#0d1c3d‘; //图表的背景颜色
let placeHoledStyle = {
    normal:{
        barBorderColor:‘rgba(0,0,0,0)‘,
        color:‘rgba(0,0,0,0)‘
    },
    emphasis:{
        barBorderColor:‘rgba(0,0,0,0)‘,
        color:‘rgba(0,0,0,0)‘
    }
};
let dataStyle = {
    normal: {
        label : {
            show: true,
            position: ‘insideRight‘,
            formatter: ‘{c}‘
        }
    }
};

@Injectable({
    providedIn: ‘root‘
})
export class EchartsService {
    public placeHoledStyle = placeHoledStyle;
    public dataStyle = dataStyle;
    public itemStyle2:any;//多维条形图文字显示
    public color2 = [‘#FFFF00‘,‘#9426E6‘,‘#00B050‘,‘#FF9900‘,‘#FFCCFF‘,‘#FF0000‘,‘#00FFFF‘];

    public LineColumnOption1: any; //折线柱状图公共模板1 横向
    public LineColumnOption2: any; //折线柱状图公共模板2 纵向
    public multidimensionalBar: any; //多维条形图
    public doubleDefeatOption: any; //双层圆图表合体
    public doubleDefeatOption2: any; //双层圆图表分开
    public lasagnaOption: any; //千层饼圆
    public normaCirclelOption: any; //正常圆
    public ringOption: any; //空心圆
    constructor() {
        //折线柱状图公共模板1 横向
        this.LineColumnOption1 = {
            backgroundColor: BackGroundColor,
            title: {
                top: ‘10‘,
                left: ‘center‘,
                textStyle: titlestyle
            },
            tooltip: {
                trigger: ‘axis‘,
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
                }
            },
            color: COLOR,
            legend: {
                orient: ‘horizontal‘, //vertical
                show:true,
                x: ‘center‘,
                y: ‘30px‘,
                itemWidth: 20,
                itemHeight: 14,
                textStyle: { //图例文字的样式
                    color: fff7,
                    fontSize: fs //统一设置颜色
                },
                data: []
            },
            toolbox: {
                show: true,
                orient: ‘vertical‘,
                x: ‘right‘,
                y: ‘center‘,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: dataViewIshow,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: [‘line‘, ‘bar‘, ‘stack‘, ‘tiled‘]
                    },
                    /*‘stack‘, ‘tiled‘*/
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            grid: {
                x: "60px",
                y: "18%",
                x2: "40px",
                y2: "14%",
                borderWidth: 0 /*去除图表边框线*/
            },
            calculable: true,
            timeLine: [],
            xAxis: [{
                type: ‘category‘,
                boundaryGap: true,
                axisLabel: {
                    rotate: 45,
                    textStyle: {
                        color: fff7
                    }
                },
                axisTick: axisTick,
                axisLine: {
                    type: ‘solid‘, //设置轴线样式
                    lineStyle: {
                        color: AxisColor
                    } //设置轴线颜色
                },
                splitLine: {
                    show: false
                }, //去除网格线
                data: []
            }],
            yAxis: [{
                type: ‘value‘,
                name: ‘‘,
                nameLocation: ‘end‘, //middle中间   start end
                nameTextStyle: {
                    color: ‘#fff‘
                }, //改变坐标轴单位name的颜色
                scale: true,
                splitLine: yAxisSplitLine, //设置网格线
                axisTick: axisTick,
                axisLabel: {
                    textStyle: {
                        color: fff7
                    },
                },
                axisLine: {
                    type: ‘solid‘, //设置轴线样式
                    lineStyle: {
                        color: AxisColor
                    } //设置轴线颜色
                }
            }],
            series: []
        };

        //折线柱状图公共模板2 纵向
        this.LineColumnOption2 = {
            backgroundColor: BackGroundColor,
            title: {
                top: ‘10‘,
                left: ‘center‘,
                textStyle: titlestyle
            },
            color: COLOR,
            tooltip: {
                trigger: ‘axis‘
            },
            grid: {
                x: "16%",
                y: "18%",
                x2: "5%",
                y2: "14%",
                borderWidth: 0 /*去除图表边框线*/
            },
            legend: {
                orient: ‘horizontal‘, //vertical
                x: ‘center‘,
                y: ‘30px‘,
                itemWidth: 20,
                itemHeight: 14,
                textStyle: { //图例文字的样式
                    color: fff7,
                    fontSize: fs //统一设置颜色
                },
                data: []
            },
            toolbox: {
                show: true,
                orient: ‘vertical‘, //vertical horizontal
                y: ‘center‘,
                color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: dataViewIshow,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: [‘line‘, ‘bar‘]
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            xAxis: [{
                type: ‘value‘,
                position: ‘top‘,
                boundaryGap: [0, 0.01],
                axisLabel: {
                    textStyle: {
                        color: fff7
                    }
                },
                axisTick: axisTick,
                axisLine: {
                    type: ‘solid‘, //设置轴线样式
                    lineStyle: {
                        color: AxisColor
                    } //设置轴线颜色
                },
                splitLine: {
                    show: false
                }, //去除网格线
            }],
            yAxis: [{
                type: ‘category‘,
                boundaryGap: true,
                axisLabel: {
                    textStyle: {
                        color: fff7
                    }
                },
                axisTick: axisTick,
                axisLine: {
                    type: ‘solid‘, //设置轴线样式
                    lineStyle: {
                        color: AxisColor
                    } //设置轴线颜色
                },
                splitLine: {
                    show: false
                }, //去除网格线
                data: []
            }],
            series: []
        };//多维条形图
        this.multidimensionalBar = {
            backgroundColor: BackGroundColor,
            title: {
                top: ‘10‘,
                left: ‘center‘,
                textStyle: titlestyle
            },
            color: COLOR,
            tooltip: {
                trigger: ‘axis‘,
                formatter : function(param){
                    let strings = ‘‘;
                    strings = strings + param[0][‘name‘];
                    for (let i = 0; i < param.length; i++) {
                        if(i%2==0){
                            strings = strings + ‘<br/>‘ + param[i][‘seriesName‘] + ‘:‘ + param[i][‘value‘]
                        }
                    }
                    return strings;
                }
            },
            grid: {
                x: "8%",
                y: "30%",
                x2: "5%",
                y2: "4%",
                containLabel: true,
                borderWidth: 0 /*去除图表边框线*/
            },
            legend: {
                orient: ‘horizontal‘, //vertical
                x: ‘center‘,
                y: ‘60px‘,
                itemWidth: 20,
                itemHeight: 14,
                textStyle: { //图例文字的样式
                    color: fff7,
                    fontSize: fs //统一设置颜色
                },
                data: []
            },
            toolbox: {
                show: true,
                orient: ‘vertical‘, //vertical horizontal
                y: ‘center‘,
                color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            xAxis : [{
                type: ‘value‘,
                position: ‘top‘,
                boundaryGap : true, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: fff7
                    }
                },
                axisTick: {show: false},
                axisLine: {
                    type: ‘solid‘, //设置轴线样式
                    lineStyle: {
                        color: AxisColor
                    } //设置轴线颜色
                },
                splitLine: {
                    show: false
                }, //去除网格线
                data: []
            }],
            yAxis : [{
                type: ‘category‘,
                boundaryGap: true,
                axisLabel: {
                    textStyle: {
                        color: fff7
                    }
                },
                axisTick: {show: false},
                axisLine: {
                    type: ‘solid‘, //设置轴线样式
                    lineStyle: {
                        color: AxisColor
                    } //设置轴线颜色
                },
                splitLine: {
                    show: false
                }, //去除网格线
                data: []
            }],
            series : []
        };

        //双层圆图表合体
        this.doubleDefeatOption = {
            backgroundColor: BackGroundColor,
            title: {
                text: ‘‘,
                x: ‘center‘,
                textStyle: titlestyle
            },
            color: COLOR,
            tooltip: {
                trigger: ‘item‘,
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: ‘vertical‘,
                x: ‘10%‘,
                y: ‘20%‘,
                itemWidth: 50,
                itemHeight: 14,
                textStyle: { //图例文字的样式
                    color: fff7,
                    fontSize: 14 //统一设置颜色
                },
                data: []
            },
            toolbox: {
                show: true,
                color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
                orient: ‘vertical‘,
                x: ‘right‘,
                y: ‘center‘,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: dataViewIshow,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: [‘pie‘, ‘funnel‘]
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: false,
            series: [{
                    name: ‘所占比例‘,
                    type: ‘pie‘,
                    selectedMode: ‘single‘,
                    startAngle: 0,
                    radius: [0, 50],
                    x: ‘20%‘,
                    width: ‘40%‘,
                    funnelAlign: ‘right‘,
                    max: 1548,
                    itemStyle: {
                        normal: {
                            label: {
                                formatter: function(params) {
                                    return params.name + ‘:‘ + (params.percent - 0).toFixed(2) + ‘%‘
                                }
                            },
                            labelLine: {
                                show: true,
                                length: 30
                            }
                        }

                    },
                    data: []
                },
                {
                    name: ‘所占比例‘,
                    type: ‘pie‘,
                    startAngle: 90,
                    radius: [70, 90],
                    x: ‘60%‘,
                    width: ‘35%‘,
                    funnelAlign: ‘left‘,
                    max: 1048,
                    itemStyle: {
                        normal: {
                            label: {
                                formatter: function(params) {
                                    return params.name + ‘:‘ + (params.percent - 0).toFixed(2) + ‘%‘
                                }
                            },
                            labelLine: {
                                show: true,
                                length: 15
                            }
                        }

                    },
                    data: []
                }
            ]
        };

        //双层圆图表分开
        this.doubleDefeatOption2 = {
            backgroundColor: BackGroundColor,
            title: {
                text: ‘‘,
                subtext: ‘‘,
                x: ‘center‘,
                textStyle: titlestyle
            },
            color: COLOR,
            tooltip: {
                trigger: ‘item‘,
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: ‘horizontal‘, //horizontal vertical
                x: ‘center‘,
                y: ‘bottom‘,
                textStyle: { //图例文字的样式
                    color: fff7,
                    fontSize: 14 //统一设置颜色
                },
                data: []
            },
            toolbox: {
                show: true,
                color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: dataViewIshow,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: [‘pie‘, ‘funnel‘]
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            series: [{
                    name: ‘半径模式‘,
                    type: ‘pie‘,
                    radius: [20, 60],
                    center: [‘24%‘, 140],
                    roseType: ‘radius‘,
                    width: ‘40%‘, // for funnel
                    max: 40,
                    itemStyle: {
                        normal: {
                            label: {
                                formatter: function(params) {
                                    return params.name + ‘:‘ + (params.percent - 0).toFixed(2) + ‘%‘
                                }
                            },
                            labelLine: {
                                show: true,
                                length: 10
                            }
                        }

                    },
                    data: []
                },
                {
                    name: ‘半径模式‘,
                    type: ‘pie‘,
                    radius: [30, 70],
                    center: [‘76%‘, 140],
                    roseType: ‘radius‘,
                    width: ‘40%‘, // for funnel
                    max: 40,
                    itemStyle: {
                        normal: {
                            label: {
                                formatter: function(params) {
                                    return params.name + ‘:‘ + (params.percent - 0).toFixed(2) + ‘%‘
                                }
                            },
                            labelLine: {
                                show: true,
                                length: 10
                            }
                        }

                    },
                    data: []
                }
                //      {
                //          name:‘面积模式‘,
                //          type:‘pie‘,
                //          radius : [30,70],
                //          center : [‘76%‘, 140],
                //          roseType : ‘area‘,
                //          x: ‘50%‘,               // for funnel
                //          max: 40,                // for funnel
                //          sort : ‘ascending‘,     // for funnel
                //          itemStyle : {
                //                normal : {
                //                    label : {
                //                        formatter : function (params) {
                //                          return params.name+‘:‘+(params.percent - 0).toFixed(2) + ‘%‘
                //                        }
                //                    },
                //                    labelLine : {
                //                        show : true,
                //                        length:10
                //                    }
                //                }
                //
                //            },
                //          data:[]
                //      }
            ]
        };

        //千层饼圆
        this.lasagnaOption = {
            backgroundColor: BackGroundColor,
            title: {
                text: ‘‘,
                subtext: ‘‘,
                x: ‘center‘,
                textStyle: titlestyle,
                y: ‘top‘
            },
            color: COLOR,
            tooltip: {
                trigger: ‘item‘,
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: ‘vertical‘,
                x: ‘left‘,
                y: ‘center‘,
                textStyle: { //图例文字的样式
                    color: fff7,
                    fontSize: 14 //统一设置颜色
                },
                data: []
            },
            toolbox: {
                show: true,
                color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: dataViewIshow,
                        readOnly: false
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: false,
            series: []
        };

        //正常圆
        this.normaCirclelOption = {
            backgroundColor: BackGroundColor,
            title: {
                text: ‘‘,
                x: ‘20‘,
                textStyle: titlestyle
            },
            color: COLOR,
            tooltip: {
                trigger: ‘item‘,
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: ‘vertical‘,
                x: ‘left‘,
                y: ‘30‘,
                itemWidth: 50,
                itemHeight: 14,
                textStyle: { //图例文字的样式
                    color: fff7,
                    fontSize: 14 //统一设置颜色
                },
                data: []
            },
            toolbox: {
                show: true,
                color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: dataViewIshow,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: [‘pie‘],
                        option: {
                            funnel: {
                                x: ‘25%‘,
                                width: ‘50%‘,
                                funnelAlign: ‘left‘,
                                max: 1548
                            }
                        }
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            series: [{
                name: ‘‘,
                type: ‘pie‘,
                radius: ‘55%‘,
                center: [‘50%‘, ‘50%‘],
                startAngle: 30,
                itemStyle: {
                    normal: {
                        label: {
                            //position : ‘inner‘,
                            formatter: function(params) {
                                return params.name + ‘:‘ + (params.percent - 0).toFixed(0) + ‘%‘
                            }
                        },
                        labelLine: {
                            show: true,
                            length: 20
                        }
                    }

                },
                data: []
            }]
        };

        //空心圆
        this.ringOption = {
            backgroundColor: BackGroundColor,
            title: {
                text: ‘‘,
                x: ‘left‘,
                y: ‘top‘,
                itemGap: 20,
                textStyle: titlestyle
            },
            color: COLOR,
            tooltip: {
                trigger: ‘item‘,
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: ‘vertical‘,
                x: ‘left‘,
                y: ‘center‘,
                textStyle: { //图例文字的样式
                    color: fff7,
                    fontSize: 14 //统一设置颜色
                },
                data: []
            },
            toolbox: {
                show: true,
                color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: dataViewIshow,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: [‘pie‘, ‘funnel‘],
                        option: {
                            funnel: {
                                x: ‘25%‘,
                                width: ‘50%‘,
                                funnelAlign: ‘center‘,
                                max: 1548
                            }
                        }
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            series: [{
                name: ‘信息化空间‘,
                type: ‘pie‘,
                radius: [‘50%‘, ‘70%‘],
                itemStyle: {
                    normal: {
                        label: {
                            //position : ‘inner‘,
                            formatter: function(params) {
                                return params.name + ‘:‘ + (params.percent - 0).toFixed(0) + ‘%‘
                            }
                        },
                        labelLine: {
                            show: true,
                            length: 20
                        }
                    },
                    emphasis: {
                        label: {
                            show: false,
                            textStyle: {
                                fontSize: fs
                            }
                        }
                    }
                },
                data: []
            }]
        }
    }

    //多维条形图文字显示  在每个条形图上要显示两个数字
    getitemStyle2(arr){
        return {
            normal: {label :
                {
                    show: true,
                    position: ‘insideRight‘,//insideRight表示內部靠右
                    formatter:function(param){
                        //console.log(param)
                        let a = arr.filter((item)=>{ return item[‘name‘] === param[‘seriesName‘]});
                        return param[‘value‘]+‘/‘+a[0][‘arrays‘][param[‘dataIndex‘]];
                    }
                }
            }
        }
    }
}

import { Injectable } from ‘@angular/core‘;//模板option通用let fff7 = ‘#fff‘; //字体统一颜色rgba(255,255,255,0.7)let fs = 14; //图表统一字体大小let COLOR = [‘#FBA3BC‘, ‘#0C8AEB‘, ‘#2EEA07‘, ‘#D74D0A‘, ‘#BE8EDE‘, ‘#66cccc‘, ‘#ff6666‘, ‘#cc3399‘, ‘#499FD9‘]; //主体颜色//let COLOR = [‘#8cc546‘, ‘#b3d3f0‘, ‘#f39e7a‘, ‘#f34d2f‘, ‘#42a3f5‘];let toolboxColor = [‘#fff‘, ‘#fff‘, ‘#fff‘]; //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置let titlestyle = {fontSize: 14,fontWeight:400,color: fff7}; //标题样式let AxisColor = ‘#0F495C‘; //#204f81 轴的统一颜色值let axisTick = { // 坐标轴小标记show: true, // 属性show控制显示与否，默认不显示interval: ‘auto‘,inside: false, // 控制小标记是否在grid里length: 6, // 属性length控制线长lineStyle: { // 属性lineStyle控制线条样式color: AxisColor,width: 2}};let dataViewIshow = true; //是否显示数据视图let ItemStyle = {normal: {label: {show: true,position: ‘top‘}}}; //formatter: ‘{c}%‘, //柱形图或者线形图上方展示数值let yAxisSplitLine = {show: true,lineStyle: {color: [AxisColor],width: 1,type: ‘solid‘}}; //设置公共网格线
let BackGroundColor = ‘#0d1c3d‘; //图表的背景颜色let placeHoledStyle = {    normal:{        barBorderColor:‘rgba(0,0,0,0)‘,        color:‘rgba(0,0,0,0)‘    },    emphasis:{        barBorderColor:‘rgba(0,0,0,0)‘,        color:‘rgba(0,0,0,0)‘    }};let dataStyle = {     normal: {        label : {            show: true,            position: ‘insideRight‘,            formatter: ‘{c}‘        }    }};

@Injectable({providedIn: ‘root‘})export class EchartsService {public placeHoledStyle = placeHoledStyle;public dataStyle = dataStyle;public itemStyle2:any;//多维条形图文字显示public color2 = [‘#FFFF00‘,‘#9426E6‘,‘#00B050‘,‘#FF9900‘,‘#FFCCFF‘,‘#FF0000‘,‘#00FFFF‘];public LineColumnOption1: any; //折线柱状图公共模板1 横向public LineColumnOption2: any; //折线柱状图公共模板2 纵向public LineColumnOption3: any; //多维条形图纵向public multidimensionalBar: any; //多维条形图public doubleDefeatOption: any; //双层圆图表合体public doubleDefeatOption2: any; //双层圆图表分开public lasagnaOption: any; //千层饼圆public normaCirclelOption: any; //正常圆public ringOption: any; //空心圆constructor() {//折线柱状图公共模板1 横向this.LineColumnOption1 = {backgroundColor: BackGroundColor,title: {top: ‘10‘,left: ‘center‘,textStyle: titlestyle},tooltip: {trigger: ‘axis‘,axisPointer: { // 坐标轴指示器，坐标轴触发有效type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘}},color: COLOR,legend: {orient: ‘horizontal‘, //verticalshow:true,x: ‘center‘,y: ‘30px‘,itemWidth: 20,itemHeight: 14,textStyle: { //图例文字的样式color: fff7,fontSize: fs //统一设置颜色},data: []},toolbox: {show: true,orient: ‘vertical‘,x: ‘right‘,y: ‘center‘,feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},magicType: {show: true,type: [‘line‘, ‘bar‘, ‘stack‘, ‘tiled‘]},/*‘stack‘, ‘tiled‘*/restore: {show: true},saveAsImage: {show: true}}},grid: {x: "60px",y: "18%",x2: "40px",y2: "14%",borderWidth: 0 /*去除图表边框线*/},calculable: true,timeLine: [],xAxis: [{type: ‘category‘,boundaryGap: true,axisLabel: {rotate: 45,textStyle: {color: fff7}},axisTick: axisTick,axisLine: {type: ‘solid‘, //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线data: []}],yAxis: [{type: ‘value‘,name: ‘‘,nameLocation: ‘end‘, //middle中间   start endnameTextStyle: {color: ‘#fff‘}, //改变坐标轴单位name的颜色scale: true,splitLine: yAxisSplitLine, //设置网格线axisTick: axisTick,axisLabel: {textStyle: {color: fff7},},axisLine: {type: ‘solid‘, //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色}}],series: []};
//折线柱状图公共模板2 纵向this.LineColumnOption2 = {backgroundColor: BackGroundColor,title: {top: ‘10‘,left: ‘center‘,textStyle: titlestyle},color: COLOR,tooltip: {trigger: ‘axis‘},grid: {x: "16%",y: "18%",x2: "5%",y2: "14%",borderWidth: 0 /*去除图表边框线*/},legend: {orient: ‘horizontal‘, //verticalx: ‘center‘,y: ‘30px‘,itemWidth: 20,itemHeight: 14,textStyle: { //图例文字的样式color: fff7,fontSize: fs //统一设置颜色},data: []},toolbox: {show: true,orient: ‘vertical‘, //vertical horizontaly: ‘center‘,color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},magicType: {show: true,type: [‘line‘, ‘bar‘]},restore: {show: true},saveAsImage: {show: true}}},calculable: true,xAxis: [{type: ‘value‘,position: ‘top‘,boundaryGap: [0, 0.01],axisLabel: {textStyle: {color: fff7}},axisTick: axisTick,axisLine: {type: ‘solid‘, //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线}],yAxis: [{type: ‘category‘,boundaryGap: true,axisLabel: {textStyle: {color: fff7}},axisTick: axisTick,axisLine: {type: ‘solid‘, //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线data: []}],series: []};//多维条形图纵向this.LineColumnOption3 = {title: {top: ‘10‘,left: ‘center‘,textStyle: titlestyle},tooltip: {trigger: ‘axis‘,axisPointer: { // 坐标轴指示器，坐标轴触发有效type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘}},color: COLOR,legend: {orient: ‘horizontal‘, //verticalx: ‘center‘,y: ‘30px‘,itemWidth: 20,itemHeight: 14,show: false,textStyle: { //图例文字的样式color: fff7,fontSize: fs //统一设置颜色},data: []},toolbox: {show: true,feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},restore: {show: true},saveAsImage: {show: true}}},grid: {y: 80,y2: 30},xAxis: [{type: ‘value‘,position: ‘top‘,boundaryGap: [0, 0.01],axisLabel: {textStyle: {color: fff7}},axisTick: axisTick,axisLine: {type: ‘solid‘, //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线}],yAxis: [{type: ‘category‘,boundaryGap: true,axisLabel: {textStyle: {color: fff7}},axisTick: axisTick,axisLine: {type: ‘solid‘, //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线data: []}],series: [{name: ‘學習任務‘,type: ‘bar‘,stack: ‘总量‘,//itemStyle : dataStyle,data: [38, 50, 33, 72]},{name: ‘學習任務‘,type: ‘bar‘,stack: ‘总量‘,itemStyle: placeHoledStyle,data: [62, 50, 67, 28]},{name: ‘自主學習‘,type: ‘bar‘,stack: ‘总量‘,//itemStyle : dataStyle,data: [61, 41, 42, 30]},{name: ‘自主學習‘,type: ‘bar‘,stack: ‘总量‘,itemStyle: placeHoledStyle,data: [39, 59, 58, 70]},{name: ‘學情分析‘,type: ‘bar‘,stack: ‘总量‘,//itemStyle : dataStyle,data: [37, 35, 44, 60]},{name: ‘學情分析‘,type: ‘bar‘,stack: ‘总量‘,itemStyle: placeHoledStyle,data: [63, 65, 56, 40]},{name: ‘教材‘,type: ‘bar‘,stack: ‘总量‘,//itemStyle : dataStyle,data: [71, 50, 31, 39]},{name: ‘教材‘,type: ‘bar‘,stack: ‘总量‘,itemStyle: placeHoledStyle,data: [29, 50, 69, 61]}]};//多维条形图this.multidimensionalBar = {backgroundColor: BackGroundColor,    title: {top: ‘10‘,left: ‘center‘,textStyle: titlestyle},color: COLOR,tooltip: {trigger: ‘axis‘,formatter : function(param){let strings = ‘‘;strings = strings + param[0][‘name‘];for (let i = 0; i < param.length; i++) {if(i%2==0){strings = strings + ‘<br/>‘ + param[i][‘seriesName‘] + ‘:‘ + param[i][‘value‘]}}return strings;}},grid: {x: "8%",y: "30%",x2: "5%",y2: "4%",containLabel: true,borderWidth: 0 /*去除图表边框线*/},legend: {orient: ‘horizontal‘, //verticalx: ‘center‘,y: ‘60px‘,itemWidth: 20,itemHeight: 14,textStyle: { //图例文字的样式color: fff7,fontSize: fs //统一设置颜色},data: []},    toolbox: {        show: true,orient: ‘vertical‘, //vertical horizontaly: ‘center‘,color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置        feature : {            mark : {show: true},            dataView : {show: true, readOnly: false},            restore : {show: true},            saveAsImage : {show: true}        }    },    xAxis : [{type: ‘value‘,position: ‘top‘,boundaryGap : true, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。axisLabel: {show: false,textStyle: {color: fff7}},axisTick: {show: false},axisLine: {type: ‘solid‘, //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线data: []}],    yAxis : [{type: ‘category‘,boundaryGap: true,axisLabel: {textStyle: {color: fff7}},axisTick: {show: false},axisLine: {type: ‘solid‘, //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线data: []}],    series : []};//双层圆图表合体this.doubleDefeatOption = {backgroundColor: BackGroundColor,title: {text: ‘‘,x: ‘center‘,textStyle: titlestyle},color: COLOR,tooltip: {trigger: ‘item‘,formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: ‘vertical‘,x: ‘10%‘,y: ‘20%‘,itemWidth: 50,itemHeight: 14,textStyle: { //图例文字的样式color: fff7,fontSize: 14 //统一设置颜色},data: []},toolbox: {show: true,color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置orient: ‘vertical‘,x: ‘right‘,y: ‘center‘,feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},magicType: {show: true,type: [‘pie‘, ‘funnel‘]},restore: {show: true},saveAsImage: {show: true}}},calculable: false,series: [{name: ‘所占比例‘,type: ‘pie‘,selectedMode: ‘single‘,startAngle: 0,radius: [0, 50],x: ‘20%‘,width: ‘40%‘,funnelAlign: ‘right‘,max: 1548,itemStyle: {normal: {label: {formatter: function(params) {return params.name + ‘:‘ + (params.percent - 0).toFixed(2) + ‘%‘}},labelLine: {show: true,length: 30}}
},data: []},{name: ‘所占比例‘,type: ‘pie‘,startAngle: 90,radius: [70, 90],x: ‘60%‘,width: ‘35%‘,funnelAlign: ‘left‘,max: 1048,itemStyle: {normal: {label: {formatter: function(params) {return params.name + ‘:‘ + (params.percent - 0).toFixed(2) + ‘%‘}},labelLine: {show: true,length: 15}}
},data: []}]};
//双层圆图表分开this.doubleDefeatOption2 = {backgroundColor: BackGroundColor,title: {text: ‘‘,subtext: ‘‘,x: ‘center‘,textStyle: titlestyle},color: COLOR,tooltip: {trigger: ‘item‘,formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: ‘horizontal‘, //horizontal verticalx: ‘center‘,y: ‘bottom‘,textStyle: { //图例文字的样式color: fff7,fontSize: 14 //统一设置颜色},data: []},toolbox: {show: true,color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},magicType: {show: true,type: [‘pie‘, ‘funnel‘]},restore: {show: true},saveAsImage: {show: true}}},calculable: true,series: [{name: ‘半径模式‘,type: ‘pie‘,radius: [20, 60],center: [‘24%‘, 140],roseType: ‘radius‘,width: ‘40%‘, // for funnelmax: 40,itemStyle: {normal: {label: {formatter: function(params) {return params.name + ‘:‘ + (params.percent - 0).toFixed(2) + ‘%‘}},labelLine: {show: true,length: 10}}
},data: []},{name: ‘半径模式‘,type: ‘pie‘,radius: [30, 70],center: [‘76%‘, 140],roseType: ‘radius‘,width: ‘40%‘, // for funnelmax: 40,itemStyle: {normal: {label: {formatter: function(params) {return params.name + ‘:‘ + (params.percent - 0).toFixed(2) + ‘%‘}},labelLine: {show: true,length: 10}}
},data: []}//      {//          name:‘面积模式‘,//          type:‘pie‘,//          radius : [30,70],//          center : [‘76%‘, 140],//          roseType : ‘area‘,//          x: ‘50%‘,               // for funnel//          max: 40,                // for funnel//          sort : ‘ascending‘,     // for funnel//          itemStyle : {//            normal : {//                label : {//                    formatter : function (params) {//                      return params.name+‘:‘+(params.percent - 0).toFixed(2) + ‘%‘//                    }//                },//                labelLine : {//                    show : true,//                    length:10//                }//            }////        },//          data:[]//      }]};
//千层饼圆this.lasagnaOption = {backgroundColor: BackGroundColor,title: {text: ‘‘,subtext: ‘‘,x: ‘center‘,textStyle: titlestyle,y: ‘top‘},color: COLOR,tooltip: {trigger: ‘item‘,formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: ‘vertical‘,x: ‘left‘,y: ‘center‘,textStyle: { //图例文字的样式color: fff7,fontSize: 14 //统一设置颜色},data: []},toolbox: {show: true,color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},restore: {show: true},saveAsImage: {show: true}}},calculable: false,series: []};
//正常圆this.normaCirclelOption = {backgroundColor: BackGroundColor,title: {text: ‘‘,x: ‘20‘,textStyle: titlestyle},color: COLOR,tooltip: {trigger: ‘item‘,formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: ‘vertical‘,x: ‘left‘,y: ‘30‘,itemWidth: 50,itemHeight: 14,textStyle: { //图例文字的样式color: fff7,fontSize: 14 //统一设置颜色},data: []},toolbox: {show: true,color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},magicType: {show: true,type: [‘pie‘],option: {funnel: {x: ‘25%‘,width: ‘50%‘,funnelAlign: ‘left‘,max: 1548}}},restore: {show: true},saveAsImage: {show: true}}},calculable: true,series: [{name: ‘‘,type: ‘pie‘,radius: ‘55%‘,center: [‘50%‘, ‘50%‘],startAngle: 30,itemStyle: {normal: {label: {//position : ‘inner‘,formatter: function(params) {return params.name + ‘:‘ + (params.percent - 0).toFixed(0) + ‘%‘}},labelLine: {show: true,length: 20}}
},data: []}]};
//空心圆this.ringOption = {backgroundColor: BackGroundColor,title: {text: ‘‘,x: ‘left‘,y: ‘top‘,itemGap: 20,textStyle: titlestyle},color: COLOR,tooltip: {trigger: ‘item‘,formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: ‘vertical‘,x: ‘left‘,y: ‘center‘,textStyle: { //图例文字的样式color: fff7,fontSize: 14 //统一设置颜色},data: []},toolbox: {show: true,color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},magicType: {show: true,type: [‘pie‘, ‘funnel‘],option: {funnel: {x: ‘25%‘,width: ‘50%‘,funnelAlign: ‘center‘,max: 1548}}},restore: {show: true},saveAsImage: {show: true}}},calculable: true,series: [{name: ‘信息化空间‘,type: ‘pie‘,radius: [‘50%‘, ‘70%‘],itemStyle: {normal: {label: {//position : ‘inner‘,formatter: function(params) {return params.name + ‘:‘ + (params.percent - 0).toFixed(0) + ‘%‘}},labelLine: {show: true,length: 20}},emphasis: {label: {show: false,textStyle: {fontSize: fs}}}},data: []}]}}//多维条形图文字显示  在每个条形图上要显示两个数字getitemStyle2(arr){return { normal: {label :    {    show: true,    position: ‘insideRight‘,//insideRight表示內部靠右    formatter:function(param){    //console.log(param)    let a = arr.filter((item)=>{ return item[‘name‘] === param[‘seriesName‘]});    return param[‘value‘]+‘/‘+a[0][‘arrays‘][param[‘dataIndex‘]];    }    }}}}}

原文地址：https://www.cnblogs.com/mary-123/p/11268309.html

时间： 2024-10-10 10:39:17

echarts常用说明的相关文章

echarts常用的配置项

最近使用echarts可视化的业务,但是有一些配置项需要修改,把这段时间的学习总结一下 1. 修改默认配置 a. 去掉分割线和网格线,在xAxis或者yAxis中设置 splitLine: { show: false } b. 修改标题背景和颜色 title: { backgroundColor: '#fff', textStyle: { fontWeight: 'normal', color: '#ff00ff' } } c. 设置坐标轴字体颜色和宽度,在xAxis或者yAxis中设置即可 a

自主封装hooks+echarts(超详细介绍)开箱即用框架

前言 react的hooks兴起之后,我们开始了新技术的探研,重新构建了以react,hooks,echarts为基准的框架,对可视化的封装.开箱即可用,非常实用,特别是如果对echarts有需求的. 项目介绍 hooks刚出来时我们就在使用,已经踩了很多坑而完善了这一整套开箱即用的框. 针对echarts进行了封装,菜单栏.面包屑等都做了自己的封装,对于icon都真正意义上进行了按需加载. 对于echarts常用的,都做了很详细的注释说明,小白也都能很快上手. 对自己项目需求但是不常用的进行了

基于angular2x+ng-bootstrap构建后台管理系统界面

写在前面的话 近来公司要做一个后台管理系统,人手比较少,于是作为一个前端也参与进来,其实据我所知,大部分的公司还是后台自己捣鼓的. 在后台没有到位的情况下,前端应该使用什么技术也着实让我为难了一把.经过短暂的调研,刷各种论坛,决定使用angular2x+bootstrap的方式去搭建后台管理系统. 用了大概一周,出于种种原因这方案被毙掉了,于是索性就写个小demo(将持续完善) 目录 预览 环境配置 依赖于 项目结构介绍 项目搭建步骤 最后 预览 项目预览    进入 项目源码 环境配置 需要安

javascript 模块化 (切记：学习思想)

模块化(切记:学习思想) 如果不用模块化编写代码,那么会具有以下问题: 代码杂乱无章,没有条理性,不便于维护,不便于复用 很多代码重复.逻辑重复 全局变量污染 不方便保护私有数据(闭包) 模块化的基本实现:闭包的自调用函数 //日期控件 var DatePicker = (function(){ return { init(){ } } })(); //Header // tabbar // login //Content // sidebar // table //Footer var KTV

Echarts 3.19 制作常用的图形 非静态

最近阿里内部使用的 图表也向外开放了 而百度就好像更有良心一点,Echarts 早就开放了 . 自己学Echarts的时候走了很多的弯路,毕竟谁让自己菜呢,多撞几次南墙才晓得疼 才知道学习方法,新手上路,请多担待. 附上下载地址 http://echarts.baidu.com/download.html  官网地址:http://echarts.baidu.com/ 饼图: 环境:Echarts 3.19  vs2013 实现方式:ajax+ashx+json 注意事项: 官网所需格式为  

学习笔记：ECharts

ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图.柱状图.散点图.K线图.饼图.雷达图.地图.和弦图.力导向布局图.仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现. http://echarts.baidu.com/doc/doc.html 文档 http://echarts.baidu.com/doc/example

CSDN开源夏令营 百度数据可视化实践 ECharts（1）

总体规划 (1)选题: 通过了解林峰老师的专题中国主要城市空气质量实况.中国经济十年时空漫游和中国人口流动大潮,涉及了人口.经济和民生等方面的内容,在这里我选择中国高考,作为我的切入点. 高考,一个永恒的话题,是一场你我都值得经历的一场无硝烟的战争.有人曾说:每个高考的孩子都背负着几代人的希望,每个高考的背后都有众多关注的眼睛.人生能有几回搏?虽然失去了许多,但终究会收获很多. (2)题目 2006-2014高考各省市报名人数及录取人数汇总专题 (3)搜集数据资料 工欲善其事,必先利其器.数据的

基于HTML5的开源图标库-ECharts

ECharts: 来自百度商业前端数据可视化团队,基于html5 Canvas,纯Javascript图表库,底层依赖ZRender,商业产品常用图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力.图表类型支持折线图(区域图).柱状图(条状图).散点图(气泡图).K线图.饼图(环形图).雷达图(填充雷达图).和弦图.力导向布局图.地图,同时支持任意维度的堆积和多图表混合展现. 链接是:h

JFreeChart与AJAX+JSON+ECharts两种处理方式生成热词统计可视化图表

本篇的思想:对HDFS获取的数据进行两种不同的可视化图表处理方式.第一种JFreeChar可视化处理生成图片文件查看.第二种AJAX+JSON+ECharts实现可视化图表,并呈现于浏览器上.   对此,给出代码示例,通过网络爬虫技术,将上传到HDFS的新浪网新闻信息实现热词统计功能,通过图表的柱状图来显示出来. ------> 目录: 1.JFreeChart可视化处理(生成本地图片) [1]HDFS文件读取 [2]JDFreeChart库应用 2.AJAX+JSON+EChart生成可视化图