Apache ECharts 5

 html的准备工作，盛放图表

<div class="chart"></div>

css的准备工作

.chart{
    width:900px;
    height:600px;
    border:solid 1px #aaaaaa;
    margin:0 auto 0;
}

js的准备工作

let chartNode=document.querySelector(".char");        //获取盛放图表的位置
let myChart=echarts.init(chartNode);         //将personNode作为参数注入该方法，生成echarts实例

let option={
                                           //配置图表数据
}

myChart.setOption(option);                 //让配置项生效

柱形图：bar

基本框架

let option={
    title:{                                    //标题组件
        text:"图表标题内容"      
    },
    xAxis:{                                    //x轴组件
        data:["周一","周二","周三"]             //盛放x轴数据
    },
    yAxis:{                                    //y轴组件
        axisLine:{
        show:true                 
        }
    },
    series:[                                   //数据系列组件(数组)
        {
             type:"bar",
             data:[1,2,3]                      //盛放y轴数据
        }
    ]
}

可设置的其他组件：

color:颜色组件                                            color:"#颜色代码"

legend:图例组件                                         legend:{data:[],left: ,/rigth: ,bottom: ,/top:}数值不带单位

 

tooptip:工具提示组件                                tooptip:{show:true}

        formatter:取值{a}数据系列的name属性取值，{b}类目数据，{c}类目取值       

                        formatter:"{a}{b}{c}"        //可以应用于柱形图折线图

        backgroundColor:"#颜色代码"         工具提示的背景颜色       

        textStyle:{color:"#颜色代码"}           工具提示的字体颜色

        padding:[,]        

        extraCssText:" "  用于设置额外的CSS样式文本，可以用于原本tooltip配置项中没有的CSS样式代码的书写。

        position:{function(point,params,dom,rect,size){return [point[]-size.contentSize[],point[]-size.contentSize[],]}}

        position:该属性可以取值为函数，函数的回调参数中包括鼠标坐标和工具提示框的宽高等必要参数

        axisPointer:{type:"shadow//"}        设置工具提示的轴指示器

grid:网格组件                                                grid:{width: ,heigth: ,top: ,bottom: } 数字不需要带单位

series组件内部：

        name:   

        label:数据显示              label:{show:true,position:"inside/top/bottom/rigth/left"}   位置默认中间

            

        stack属性，堆叠,取值相同则堆叠

        

        barWidth:设置柱形图的柱宽度

        itemStyle:{borderRadius:数值}        设置柱形图的柱圆角

                           color:"#颜色代码"           设置柱形图的柱颜色

 折线图：line

let option={
    title:{                                    //标题组件
        text:"图表标题内容"      
    },
    xAxis:{                                    //x轴组件
        data:["周一","周二","周三"]             //盛放x轴数据
    },
    yAxis:{                                    //y轴组件
        axisLine:{
        show:true                 
        }
    },
    series:[                                   //数据系列组件(数组)
        {
             type:"line",
             data:[1,2,3]                      //盛放y轴数据
        }
    ]
}

 series组件内部：

        smooth:折线图中光滑功能                                                smooth:true

        areaStyle:{}        设置区域折线图中区域

        

                        areaStyle内部：

                                        shadowOffsetX:设置阴影水平方向偏移

                                        shadowOffsetY:设置阴影垂直方向的偏移

                                        shadowColor:设置阴影的颜色

                                        shadowBlur:设置阴影边缘柔化效果

                                        opacity:设置区域折线图中区域着色的不透明度

                                        origin:设置着色区域分布  series[].areaStyle.origin="start/end/y轴有效值"

                                        color:着色颜色        series[].areaStyle.color="#颜色代码"

                                                                        设置渐变的类型为线性渐变    

series:[{
    areaStyle:{
        color:{
            type:'linear',                // 设置渐变的类型为线性渐变
            x:0,                          // (x,y)提供线性渐变的起点位置
            y:0,
            x2:0,                         // (x2,y2)提供线性渐变的终点位置
            y2: 1,
            y2:1,
            colorStops:[                  // 设置渐变色的色标
                {offset:0,color:'#3385ff'},// {offset:色标的位置,color:色标的颜色}
                {offset:1,color:'#ff5857'}
            ],
            global:false                    // 取值为true表示坐标单位为像素
        }
    }
}]

                                                                             设置渐变的类型为径向渐变fafa

series:[{
    areaStyle:{
        color:{
            type:'radial',
            x:0.5,	            // 径向渐变圆心的横坐标
            y:0.5,	            // 径向渐变圆心的纵坐标
            r:0.5,	            // 径向渐变的半径
            colorStops:[
                {offset:0,color:'red'},
                {offset:1,color:'blue'}
            ],
            global: false
        }
    }
}]

        方波图： 

        step属性:将普通折线图变为方波图        series.[]step="start/middle/end"

        

 饼形图：pie

let option={
    title:{                                    //标题组件
        text:"图表标题内容"      
    },
    series:[                                   //数据系列组件(数组)
        {
             type:"pie",
             center:["50%","50%"],             //圆心位置
             radius:["0%","80%"]               //饼形图内部和外部的半径
             data:[
                {name:"周一",value:1},         //盛放数据
                {name:"周二",value:2},
                {name:"周三",value:3}
             ]                                  
        }
    ]
}

series内部：

        center:设置饼形图圆心在容器中的坐标      默认值：cencer:["50%","50%"]

        radius:设置饼形图内部和外部的半径          默认值：radius:[0,"80%"]

        data:数组元素的对象，成员包括name:数据类目名称,value:数据值,selected:数据在默认下是否选中

        selectedMode属性:数据中selected要生效        selectedMode:" "

                                      取值:false默认值,无法被选中:single:可以选中一个,multiple可以选中多个

         labelLine:隐藏饼形图的引线        labelLine:{show:false}

南丁格尔图：”玫瑰图“

series数据系列中

roseType:取值：area:扇叶面积表示数据大小；radius:半径表示数据大小

                           旋转方向:clockwise:顺时针排列

                                           startAngle:设置饼形图起始角度,0°水平向右，90默认