ECharts的基本使用

一、ECharts的特点

二、基本使用

第一步：引入echarts.js文件

第二步：准备呈现图标的盒子

第三步：初始化echarts实力对象：

let mCharts = echarts.init(document.querySelector('div'));//传递的dom元素
//就是用来装echarts的框

第四步：准备配置项

let option = {
        XAxis：{
            type：'category',
            data:["小米","小红","小王"],
            yAxis:{
                type:"value",
            },
            series:[
                {
                    name:"语文",
                    type："bar",
                    data:["70","80","90"]                    
                }
            ]
            
        }
}

第五步：将配置项设置给echarts实例对象

mCharts.setOption(option);

三、相关配置解释

●xAxis: 直角坐标系中的x轴

●yAxis: 直角坐标系中的y轴

●series: 系列列表。每个系列通过type决定自己的图表类型。

let option = {
        title：{
            text:"成绩",//标题
            link:"... ",//点击标题的链接
            tsxtStyle:{
                //主标题的文字风格
            }
        },
        XAxis：{
            type：'category',//类目轴
            data:["小米","小红","小王"],
            yAxis:{
                type:"value",//数值轴 
            },
            series:[//主要是配置给y轴的数据
                {
                    name:"语文",
                    type："bar",//图形 bar柱状图  
                     data:["70","80","90"]                                      
                }
            ]
            
        }
}

四、七大图表

 

1.柱状图

柱状图常见效果：

标记：最大值 最小值 平均值

MarkPoint

Markline

let option = {
        title：{
            text:"成绩",//标题
            link:"... ",//点击标题的链接
            tsxtStyle:{
                //主标题的文字风格
            }
        },
        XAxis：{
            type：'category',//类目轴
            data:["小米","小红","小王"],
            yAxis:{
                type:"value",//数值轴 
            },
            series:[//主要是配置给y轴的数据
                {
                    name:"语文",
                    type："bar",//图形 bar柱状图  
                   marPoint:{
                       data:[
                           {type:"max",name:"最大值"},
                           {type:"min",name:"最小值"}
                       ]
                      } ,
                   markLine:{
                       data:[
                           {type:"average",name:"平均值"}
                       ]
                    } ,
                   data:["70","80","90"],                                     
                }
            ]
            
        }
}

显示：数值显示 柱宽度

label barWidth 更改x和y的角色

series:[//主要是配置给y轴的数据
                {
                    name:"语文",
                    type："bar",//图形 bar柱状图  
                   marPoint:{
                       data:[
                           {type:"max",name:"最大值"},
                           {type:"min",name:"最小值"}
                       ]
                      } ,
                  markLine:{//显示平均值
                       data:[
                           {type:"average",name:"平均值"}
                       ]
                    } ,
                label:{
                    show:true,
                    rotate:60,//旋转
                    position："top"//标签的位置
                },
                data:["70","80","90"],                                     
                }
            ]

通用配置

1. title 标题

文字样式 textStyle

let option ={
    titel:{
        text:"通用样式",
        textStyle:{
            color:"red"
        },
        borderWidth:5,
        borgerRadius:5,
        borderColor:"blue",
        //标题位置
        left:10,
    } 
}

2. tooltip 提示

let option ={
        tooltip:{
          //trgger: "item",//移动到柱状内部会显示的内容
           trigger:"axis",
           triggerOn:"mouseover"//鼠标移入时显示，对应click 鼠标点击时显示
           //formatter:`{b}的成绩是{c}`//提示中显示的内容
           formatter:function(arg){//可使用回调函数
               return arg[0].name
               }
           } 
    
}

3.toolbox 工具按钮

let option ={
    toolbox:{
        feature:{
            //到处图片
            saveAsImage:{},
            //数据视图 呈现最原始的数据，并可以修改
            dataView:{},
            //重置功能
            restore:{},
            //区域缩放 可还原
            dataZoom:{},
           // 动态图表中间切换
            magicType:{
            type:["bar","line"]
            },
        }
    }
}

4.legend 图例

let option = {
        title：{
            text:"成绩",//标题
            link:"... ",//点击标题的链接
            tsxtStyle:{
                //主标题的文字风格
            }
        },
        XAxis：{
            type：'category',//类目轴
            data:["小米","小红","小王"],
            yAxis:{
                type:"value",//数值轴 
            },
            legend:{
            data:["语文","数学"]//对应的标准为data中的字符串与
            //series中的那么值匹配
            },
            series:[//主要是配置给y轴的数据
                {
                   name:"语文",
                   type："bar",//图形 bar柱状图  
                   marPoint:{
                       data:[
                           {type:"max",name:"最大值"},
                           {type:"min",name:"最小值"}
                       ]
                      } ,
                   markLine:{
                       data:[
                           {type:"average",name:"平均值"}
                       ]
                    } ,
                   data:["70","80","90"],                                     
                },
                {
                    name:"数学",
                    type:"bar",
                    data:["75","80","70"]
                }
            ]
            
        }
}

2.折线图

let option = {
        title：{
            text:"成绩",//标题
            link:"... ",//点击标题的链接
            tsxtStyle:{
                //主标题的文字风格
            }
        },
        XAxis：{
                type：'category',//类目轴
                data:["小米","小红","小王"],
                boundaryGap:false,//x轴紧挨边缘
                },
       yAxis:{
                type:"value",//数值轴 
                scale:true//脱离0值比例
         },
       legend:{
            data:["语文","数学"]//对应的标准为data中的字符串与
            //series中的那么值匹配
         },
       series:[//主要是配置给y轴的数据
               {
                   name:"语文",
                   type："line",//图形 折线图  
                   marPoint:{
                       data:[
                           {type:"max",name:"最大值"},
                           {type:"min",name:"最小值"}
                       ]
                    } ,
                   markLine:{
                       data:[
                           {type:"average",name:"平均值"}
                       ]
                    } ,
                    markArea:{
                        // 标注区间
                        data:[
                            [
                                {XAxis:'1月'},//开始值
                                {XAxis:'2月' },//结束值
                            ],
                            [
                                {XAxis:'7月'},//开始值
                                {XAxis:'8月' },//结束值
                            ]
                        ]
                    },
                    areaStyle:{//填充风格
                        color:'red',
                    },
                    smooth:true,//平滑的曲线 
                    lineStyle:{
                        color:'red',//线条颜色
                        type:'dashed',//线条形状 直线solid  点状虚线
                    },
                    data:["70","80","90"],                                     
                },
                {
                    name:"数学",
                    type:"bar",
                    data:["75","80","70"]
                }
            ]
            
        }
}

堆叠图

  let option = {
            yAxis: {
                type: 'category',
                data: xDataArr,
            },
            yAxis: {
                type: 'value',              
            },
            series:[
                {
                    type:"line",
                    data:data1,
                    stack:"all",//堆叠 以数据小的为坐标 stack值要一样
                    areaStyle:{},//填充风格
                },
                {
                    type:"line",
                    data:data2,
                    stack:"all",//堆叠 以数据小的为坐标
                    areaStyle:{},
                }
            ]
        }

小结

➢基本的折线图

●基本的代码结构

●x轴和y轴的数据

●series中 的type设置为line

➢折线图常见效果

●最大值\最小值\平均值markPoint markLine markArea

●线条显示smooth lineStyle

●填充风格areaStyle

●紧挨边缘boundaryGap

●脱离0值比例scale

●堆叠图stack

➢折线图特点

折线图常用来分析数据随时间的变化趋势

3.散点图

// 散点图
        let option = {
            xAxis: {
                type: "value",
                scale: true,
            },
            yAxis: {
                type: "value",
                scale: true,//脱离0值比例
            },
            serise: {
                type: "scatter",//散点图
                data: axisData,//axisData为二维数组
            }
        }

散点图的常见效果：

气泡效果图--控制散点的大小和颜色

let option = {
            xAxis: {
                type: "value",
                scale: true,
            },
            yAxis: {
                type: "value",
                scale: true,//脱离0值比例
            },
            serise: {
                // type: "scatter",//散点图
                type: "effectScatter",//散点图 涟漪动画
                rippleEffect: {
                    scale: 10 // 涟漪动画大小
                },
                showEffectOn: "",// render-每个散点渲染完后自动拥有涟漪效果 
                // emphasis-鼠标滑过时，出现的涟漪动画 
                data: axisData,//axisData为二维数组
                symbolSize: function (arg) {
                    // symbolSize可接受回调函数
                    let height = arg[0];
                    let weight = arg[1];
                    let bmi = weight / (height * height);
                    if (bmi > 28) {
                        return 20
                    } else {
                        return 5
                    }
                },
                itemStyle: {
                    color: function (arg) { //设置气泡颜色 此时arg是一个对象
                        let height = arg.data[0];
                        let weight = arg.data[1];
                        let bmi = weight / (height * height);
                        if (bmi > 28) {
                            return "red"
                        } else {
                            return "green"
                        }
                    }
                }
            }
        }

小结

➢基本的散点图

●基本的代码结构

●x轴和y轴的数据, 是- -个二维数组

●series中的type设置为scatter

●xAxis和yAxis中的type设置 为value

➢散点图常见效果

●气泡图

涟漪效果

➢散点图特点

●散点图可以帮助我们推断出不同维数据之间的相关性

●散点图也经常用在地图的标注

4.直角坐标系的通用配置

柱状图，折线图，散点图 都是直角坐标系图

let option = {
grid: {//控制图标的大小和位置
                show: true,//显示
                borderWidth: 10,
                borderColor: "red",
                left: 20,
                top: 20,
                width: 200,
                hight: 200,
            },
            XAxis: {
                type: 'category',//类目轴
                data: ["小米", "小红", "小王"],
            },
            yAxis: {
                type: "value",//数值轴 
            },
            series: [//主要是配置给y轴的数据
                {
                    name: "语文",
                    type: "bar",//图形 bar柱状图  
                    data: ["70", "80", "90"]
                }
            ]
        }

配置

如果一个轴是类目轴，需要 配置data ，如果是数值轴，不需要配置data，它会自动在 series 中去找data

1: 网格 grid

grid是用来控制直角坐标系的布局和大小

x轴和y轴就是在grid的基础上进行绘制的

●显示grid

show

●grid的边框

borderWidth、borderColor

●grid的位 置和大小

left、

top、right、

bottom

width、height

2:坐标轴axis

坐标轴分为x轴和y轴

一-个grid中最多有两种位置的x轴和y轴

●坐标轴类型 type

value:数值轴,自动会从目标数据中读取数据

category:类目轴,该类型必须通过data设置类目数据

●显示位置position

xAxis:可取值为top或者bottom

yAxis:可取值为left或者right

 let option = {
            XAxis: {
                type: 'category',//类目轴
                data: ["小米", "小红", "小王"],
                potion:top,//可取值为top或者bottom
            },
            yAxis: {
                type: "value",//数值轴 
                potion:left,//可取值为left或者right
            },
            series: [//主要是配置给y轴的数据
                {
                    name: "语文",
                    type: "bar",//图形 bar柱状图  
                    data: ["70", "80", "90"]
                }
            ]
        }

3:区域缩放dataZoom

dataZoom用于区域缩放,对数据范围过滤, x轴和y轴都可以拥有

dataZoom是- -个数组,意味着可以配置多个区域缩放器

●类型type

slider:滑块

inside:内置,依靠鼠标滚轮或者双指缩放

●指明产生作用的轴

xAxisIndex:设置缩放组件控制的是哪个x轴,一般写0即可

yAxisIndex:设置缩放组件控制的是哪个y轴, -般写0即可

●指明初始状态的缩放情况

start:数据窗口范围的起始百分比

end:数据窗口范围的结束百分比

let option4 = {
            dataZoom: [
                // dataZoom只有一个对象时，默认是x轴，如果不只一个就需要指明坐标轴
                {
                    type: "slider",//表格下方的滑块控制缩放的区域 可滚动
                    //type:"inside"//鼠标滚轮或者双击缩放
                    xAxisIndex: 0
                },
                {
                    type: "slider",//表格下方的滑块控制缩放的区域 可滚动
                    //type:"inside"//鼠标滚轮或者双击缩放
                    yAxisIndex: 0,
                    start: 0,
                    end: 50//百分之多少
                },
            ],//区域缩放
            toolbox: {
                feature: {
                    dataZoom: {},//缩放区域
                }
            },
            XAxis: {
                type: 'category',//类目轴
                data: ["小米", "小红", "小王"],
                potion: top,
            },
            yAxis: {
                type: "value",//数值轴 
                potion: left,
            },
            series: [//主要是配置给y轴的数据
                {
                    name: "语文",
                    type: "bar",//图形 bar柱状图  
                    data: ["70", "80", "90"]
                }
            ]
        }

5.饼图

基本配置

// 饼图 value 为数组，数组中包含对象
        // 对象中为name和vale [{name:"xx",value:"vv"},{name:"xx",value:"vv"}]
        let pieData = [{ name: "x2x", value: 1220 }, { name: "xx2", value: 3220 }]
        let option5 = {
            series: [{
                type: 'pie',// 饼图
                data: pieData,
            }]
        }

// 饼图常见效果
        let option6 = {
            series: [{
                type: 'pie',// 饼图
                data: pieData,
                label: {//饼图文字显示
                    show: true,//显示文字
                    // formatter: "ii",//决定文字显示的内容 可接受回调函数
                    formatter: function (arg) {
                        // 饼图中的arg参数中有一个 percent参数 为所占百分比
                        return arg.name + "平台花了" + arg.value +
                         "占" + arg.percent + "%"
                    }
                },
                // radius:20,//饼图半径的设置
                // radius:"40%",//可设置百分比
                // 参照的是宽度和高度中的较小的一个值的一半的百分比设置
                // radius:["30%","75%"],
                //设置为圆环，第0个元素代表内圆半径，第2个元素为外远半径
                roseType:"radius",
                //蓝丁格尔图 设置每部分半径不同
                // selectedMode:"single", 
                //选中的效果，能够选中的区域偏离圆点一小段距离
                selectedMode:"multiple",
                selectedOffset:20,//设置偏离圆心的距离
            }]
        }

小结

➢基本的饼图

●基本的代码结构

●数据是由name和value组成 的对象所形成的数组

●series中 的type设置为pie

●无须配置xAxis和yAxis

➢饼图常见效果

●显示文字的格式化

●圆环

●南丁格尔图

●选中效果

➢饼图特点

●饼图可以很好地帮助用户快速了解不同分类的数据的占比情况

6.地图

矢量地图的实现步骤

●ECharts最 基本的代码结构:

引入js文件, DOM容器,初始化对象,设置option

●准备中国的矢量地图json文件,放到json/map/的目录下

china.json

●使用Ajax获 取china.json

$.get("json/ map/china.json', function (chinaJson) {})

●在回调函数中往echarts全局对象注册地图的json数据

echarts.registerMap('chinaMap', chinaJson);

●在geo下设置

type:'map'

map:'

'chinaMap'

7.自适应

当浏览器的大小发生变化的时候,如果想让图表也能随之适配变化

●1. 监听窗口大小变化事件

●2.在事件 处理函数中调用ECharts实例对象的resize即可

window.onresize = function(){
myChart.resize();
}

8.加载动画

ECharts已经内置好了加载数据的动画,我们只需要在合适的时机显示或者隐藏即可

●显示加载动画

mCharts.showLoading()

●隐藏加载动画

mCharts.hideLoading()