一、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()

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信