©2020-2024 ioDraw All rights reserved
一、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()