ECharts学习笔记

Posted 2021-06-10 coderkey

文章目录

• • 一、ECharts是什么?
  • 二、绘图基本用法
  • 三、柱状图
  • 四、折线图

一、ECharts是什么?

一个纯javascript图表库。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

二、绘图基本用法

1、引入echarts.js文件

// 方法一：<script src="js/echarts.min.js"></script>   // 从官网下载引入
// 方法二：npm install echarts --save    
// 导入三种方式（建议安装4版本）
import echarts from 'echarts' 
let echarts = require('echarts') 
import * as echarts from 'echarts'

2、准备一个呈现图表的盒子

// 写法一：<div id="main" style="width: 600px; height: 400px;"></div>
// 写法二：<div ref="chartDom" style="width: 600px; height: 400px;"></div>

3、初始化echarts实例对象

// 写法一：var mCharts = echarts.init(document.querySelector("#main"))
// 写法二：var mCharts = echarts.init(this.$refs.chartDom)   // vue中的写法

4、准备配置项

var option = {
    ...
}

5、将配置项设置给echarts实例对象

mCharts.setOption(option)

三、柱状图

bar：绘制柱状图

var option = {
    xAxis:{
        type:"category",
        data:['小明','小红','小王']
    },
    yAxis:{
        type:"value",
    },
    series:[
        {
            name:"语文",
            type:"bar",
            data:[70,92,87]
        }
    ]
}

• 图例展示：

1、常见效果

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

• markPoint：在series中设置显示最大值或最小值

//显示针形圆
markPoint:{
    data:[
        {
            type:"max",
            name:"最大值"
        },
        {
            type:"min",
            name:"最小值"
        }
    ]
},

• markLine：在series中设置平均值线

//显示平均线
markLine:{
    data:[
        {
            type:"average",
            name:"平均值"
        }
    ]
},

显示：数值显示 柱宽度 横向柱状图

• lable：在series中设置柱值

label:{
    show:true,//是否显示数值
    rotate:60,//数值是否旋转
    position:'inside'//设置显示数值位置 top：顶部 bottom：底部
},

• barWidth：在series中设置柱宽度

barWidth:'30%'//设置柱宽度

• itemStyle：在series中设置柱样式

itemStyle:{
    color:'red',  
}

• 图例展示：
  
• 横纵向柱状图

//横向柱状图
xAxis:{
    type:"value",
},
yAxis:{
    type:"category",
    data:xDataArr
}

• 图例展示：
  

//纵向柱状图
xAxis:{
    type:"category",
    data:xDataArr
},
yAxis:{
    type:"value",
},

2、通用配置

• title：设置标题

title:{
    text:"成绩展示",//设置标题内容
    //设置标题样式
    textStyle:{
        color:"red",//字体颜色
        fontSize:28,//字体大小
        fontWight:"bold"//字体宽度
    },
    //设置标题边框
    borderWidth:5,//边框宽度
    borderColor:'blue',//边框颜色
    borderRadius:5,//棱角弧度
    left:50,//距离页面左边距离
    top:10//距离页面顶部距离
},

• tooltip：设置鼠标移动或点击显示内容

tooltip:{
    // trigger:"item"
    trigger:"axis",
    triggerOn:"click",//默认值：mousemove
    //自定义显示内容
    // formatter:"{b}的成绩是{c}"
    formatter:function(arg){
        return arg[0].name+"的分数是："+arg[0].data
    }
}

• toolbox：ECharts提供的工具栏

toolbox:{
    feature:{
        saveAsImage:{},//导出图片的功能
        dataView:{},//数据视图
        restore:{},//重置
        dataZoom:{},//区域缩放
        magicType:{
            type:['bar','line']
        }//动态图表类型的切换
    }
}

• legend：设置图例

***注意：***与series数组中的数据的name值一致

legend:{
    data:["语文","数学"]
}

• 图例展示：
  
• grid：在option中设置图标的大小,边框,位置

grid:{
    show:true,//显示grid
    //边框设置
    borderWidth:10,
    borderColor:"red",
    //位置设置
    left:120,
    top:120,
    //大小设置
    width:100,
    height:100
}

• 图例展示：
  
• position：在xAxis和yAxis设置坐标轴位置

xAxis:{
    type:"category",
    data:xDataArr,
    position:"top"//默认为bottom
},
yAxis:{
    type:"value",
    position:"right"//默认为left
}

• dataZoom：在option中设置区域缩放

dataZoom:[
    {
        type:"slider",//滑块
        // type:"inside",//内置依靠鼠标滚轮滑动或者双指缩放
        xAxisIndex:0//设置x轴缩放
    },
    {
        yAxisIndex:0,//设置y轴缩放
        start:0,//数据窗口初始百分比
        end:80//数据窗口百分比
    }
]

• 图例展示：
  

四、折线图

• line：绘制折线图

var option = {
    xAxis:{
        type:"category",
        data:xDataArr,
    },
    yAxis:{
        type:"value",
    },
    series:[
        {
            type:"line",	
            data:yDataArr,
            stack:"all",
            areaStyle:{}
        },
    ]
}

• 图例展示：
  

1、常见效果

标记：最大值 最小值 平均值 标注区间

markPoint：在series中设置显示最大值或最小值
markPoint:{
    data:[
        {
            type:"max",
            name:"最大值"
        },
        {
            type:"min",
            name:"最小值"
        }                                                 
   ]
}    

• markLine：在series中设置平均值线

markLine:{
    data:[
        {
            type:"average",
            name:"平均值"
        }
    ]
}

• markArea:在series中设置标注区间

markArea:{
    data:[
        [
            {
                xAxis:"1月",
            },
            {
                xAxis:"2月"
            }
        ],
        [
            {
                xAxis:"7月",
            },
            {
                xAxis:"8月"
            }
        ]
    ]
}

线条控制：平滑 风格

• smooth：在series中设置平滑效果

smooth:true

• lineStyle：在series中设置线条样式

lineStyle:{
    color:"green",
    type:"dotted"//dashed 虚线 dotted 点线 solid实线
}

• areaStyle：在series中设置面积区域

areaStyle:{
    color: 'pink'
}

• boundaryGap：在xAxis设置紧挨边缘

xAxis:{
    type:"category",
    data:xDataArr,
    boundaryGap:false//紧挨边缘
}

• 图例展示：

• scale：在yAxis设置缩放脱离0值比例

yAxis:{
    type:"value",
    scale:true
}

• stack：在series中设置堆叠图

series:[
    {
        type:"line",	
        data:yDataArr1,
        stack:"all",//设置堆叠效果
        areaStyle:{}//设置阴影区域
    },
    {
        type:"line",
        data:yDataArr2,
        stack:"all",//设置堆叠效果
        areaStyle:{}//设置阴影区域
    }
]

• 图例展示：