简而言之,百度Echarts真的是数据展示的神器,官方给出的实例就能够满足实际基本要求

1.echarts创建实例
2.异步加载
3.移动端自适应
4.Echarts的标题title设置大全
5.echarts知识点
6.Echarts解决的实际问题

1.引入ECharts

通过标签方式直接引入构建好的 echarts 文件

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>

2.为 ECharts 准备一个具备高宽的 DOM 容器

1
2
3
4
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>

3. echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图

完整案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.static -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
let option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

4.异步加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</body>
<div id="pie" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('pie'));
myChart1.showLoading();
setInterval(function(){
myChart1.hideLoading();
<!---这里面进行数据绑定与实例化图表 -->
myChart1.setOption({
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
});
},1000);
</script>
</body>
</html>

5.移动端自适应

1.为Echarts准备一个具有宽高(有一个即可)的DOM,推荐使用bootstrap的栅栏系统来设置布局
2.大部分的组件和系列的left/right/top/bottom/width/height的定位方式

  • 绝对值,用number形式书写(已经固定写死了浏览器的像素)
  • 百分比,表示占DOM容器的宽高的百分之多少,用string形式书写
  • 位置描述,即center(水平居中),middle(垂直居中)

6.Echarts的标题title设置大全

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var option = {
//标题
title : {
show:true,//显示策略,默认值true,可选为:true(显示) | false(隐藏)
text: '主标题',//主标题文本,'\n'指定换行
link:'',//主标题文本超链接,默认值true
target: null,//指定窗口打开主标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)
subtext: '副标题',//副标题文本,'\n'指定换行
sublink: '',//副标题文本超链接
subtarget: null,//指定窗口打开副标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)
x:'center'//水平安放位置,默认为'left',可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
y: 'top',//垂直安放位置,默认为top,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
textAlign: null,//水平对齐方式,默认根据x设置自动调整,可选为: left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)',//标题背景颜色,默认'rgba(0,0,0,0)'透明
borderColor: '#ccc',//标题边框颜色,默认'#ccc'
borderWidth: 0,//标题边框线宽,单位px,默认为0(无边框)
padding: 5,//标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距
itemGap: 10,//主副标题纵向间隔,单位px,默认为10
textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {//副标题文本样式{"color": "#aaa"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas,相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层,canvas对象增多会消耗更多的内存和性能,并不建议设置过多的zlevel,大部分情况可以通过二级层叠控制z实现层叠控制。
z: 6,//二级层叠控制,默认6,同一个canvas(相同zlevel)上z越高约靠顶层。
},

7.echarts知识点

legend默认不显示某些图例(selected属性)

  1. selected属性将目标图例设置为false

    1
    2
    3
    4
    5
    6
    7
    8
    legend: {
      show: '',
      icon:"circle",  //更改图列的默认样式 ( 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow')(全部的图例类型改变)
      selected:{
        "上期增长率":false //图例为‘上期增长率’的一项默认置灰
        "同比增长率":false //图例为‘同比增长率’的一项默认置灰
      }
    },

  2. 图例的列表布局与文本对齐方式

    1
    2
    3
    4
    5
    legend: {
    orient:'horizontal' 或 'vertical' // 图例列表的布局朝向。
    align: 'auto'或 'left' 或'right' // 图例标记和文本的对齐
      }
    }

    这就是legend.align由right变为left的效果


  3. legend的其它参数

    1
    2
    3
    4
    5
    6
    7
    legend: {
    orient: 'vertical',
    x:'right', //可设定图例在左、右、居中
    y:'center', //可设定图例在上、下、居中
    padding:[0,50,0,0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
    data: ['直接访问','微信','百度','其他文章','网页']
    },

    ①x : 可以设定图例在—-左(left)、右(right)、居中(center)、填写数字(如:100px)
    ②y : 可以设定图例在—-上(top)、下(bottom)、居中(center)、填写数字(如:100px)
    ③另外,可使用padding:
    padding:[0,50,0,0] [(距离上方距离),(距离右方距离)、(距离下方距离)、(距离左方距离)]


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
series: [{
name: '邮件营销', // 鼠标放在折线点上显示的名称
type: 'line',
stack: '总量', // 总量,每组数据的stack最好不要相同
yAxisIndex: 1, // 选择指定的y轴样式,默认为0,即选择第一个y轴样式,注意:当两组数据的stack相同时,数据会重叠,样式会变样
symbol:'arrow', // 折线点样式:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize:15, // 折线点的大小
cursor:'pointer', // 设置鼠标停置在图表上的显示样式
smooth:true, // 设置后折现会变得平滑
itemStyle: { // 设置折线样式
normal: {
color: "#386db3",//折线点的颜色
lineStyle: {color: "#386db3"//折线的颜色
}},
data: [120, 132, 101, 134, 90, 230, 210]
},{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},{},{}...
]

series数据集:是一个数组,表示可以在一张表上展示多个折线图
type:表示图表类型。
stack:折线图堆叠的重要参数。只要将stack的值设置不相同,两个图形就不会堆叠了

  1. x,y轴的数据倾斜
    效果图
    原理图
1
2
3
4
5
6
7
8
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel:{
// 设置坐标轴刻度数据旋转
rotate:60
}
}

  1. 关于x轴,y轴的xAxis,yAxis的使用说明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
xAxis : [{
type : 'category',
// type:坐标轴类型。
// [ default: 'category' ]
/*可选:
1.'value' 数值轴,适用于连续数据;
2.'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据;
3.'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度;
4.'log' 对数轴。适用于对数数据。*/
data : ['上海','北京'], //x轴下面的数据
axisTick: {
show: false, //是否显示网状线 默认为true
alignWithLabel: true
},
//用于设置x下面的字体
axisLabel:{
show:true, //这里的show用于设置是否显示x轴下的字体 默认为true
     interval:0, //可以设置成 0 强制显示所有标签(即类目category)。如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
rotate: 60 // 坐标轴刻度旋转
textStyle:{ //textStyle里面写x轴下的字体的样式
color:'#333',
fontSize:13
}
},
axisLine:{
show:true, //这里的show用于设置是否显示x轴那一条线 默认为true
lineStyle:{ //lineStyle里面写x轴那一条线的样式
color:'#6FC6F3',
width:2, //轴线的粗细 我写的是2 最小为0,值为0的时候线隐藏
}
}
}]

yAxis属性代表echarts图表的y轴,样式设置方式与x轴的方式是一样,就是设置的属性会有所差异

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
yAxis:[{
min:0, //y轴的最小值
max:100, //y轴最大值
interval:20, //值之间的间隔
//上面的三个值可以根据自己需求随意设置 不设置时会根据图中的值自动生成相应的值
position:'left,right' // 双y轴时设置y轴位置
type:'value',
/* type坐标轴类型:[ default: 'value' ]
    可选:1.'value' 数值轴,适用于连续数据。x
    2.'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
3.'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
4.'log' 对数轴。适用于对数数据。*/
splitLine:{show:false}, //去除网状线 默认为true
//用于设置y轴的字体
axisLabel:{
show:true, //这里的show用于设置是否显示y轴下的字体 默认为true
rotate: 60 // 设置坐标轴数据旋转大小,Number类型
textStyle:{ //textStyle里面写y轴下的字体的样式
color:'#333',
fontSize:13
},
},
//用于设置y轴的那一条线
axisLine:{
show:true, //这里的show用于设置是否显示y轴那一条线 默认为true
lineStyle:{ //lineStyle里面写y轴那一条线的样式
color:'#6FC6F3',
width:2, //轴线的粗细 我写的是2 最小为0,值为0的时候线隐藏
}
}
}]
  1. datazoom区域缩放
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

dataZoom=[ //区域缩放
{
id: 'dataZoomX',
show:true, //是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。
backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色
type: 'slider', //slider表示有滑动块的,inside表示内置的
dataBackground:{ //数据阴影的样式。
lineStyle:mylineStyle, //阴影的线条样式
areaStyle:myareaStyle, //阴影的填充样式
},
fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。
borderColor:"#ddd", //边框颜色。
filterMode: 'filter', //'filter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。
//'weakFilter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。
//'empty':当前数据窗口外的数据,被 设置为空。即 不会 影响其他轴的数据范围。
//'none': 不过滤数据,只改变数轴范围。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。
zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
},
{
id: 'dataZoomY',
type: 'inside',
filterMode: 'empty',
disabled:false, //是否停止组件的功能。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。
zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。
}
  1. echarts双y轴设置

y轴的属性设置yAxis:[{},{}],数组中每一个对象就是一个y轴设置,而series中的yAxisIndex属性可以选择指定的y轴样式。
PS:注意:当多组数据的stack相同时,数据会叠加,样式会变得奇形怪状,最好不要设置一样

8.Echarts解决的实际问题

  • x轴xAxis配置
    • x轴显示全部文字,强制显示
  • 改善项目
  1. x轴显示全部文字,强制显示(参考Echarts x轴文本内容太长的几种解决方案

    问题描述:当我们做一个月度报表时,展示1~12月份的数据,在某些分辨率较低的PC,mobile设备上,Echarts就会自适应调整,就有可能无法完全显示,比如只显示1,3,5,…,11月份数据,那这时我们想要完全展示怎么办呢?

  • 显示全部文字,强制显示
1
2
3
4
5
6
7
8
9
10
11
12
13
xAxis: {
data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据
name:"123",//坐标轴名称。
nameLocation:'end',//坐标轴名称显示位置。
axisLabel : {//坐标轴刻度标签的相关设置。
interval:0, //强制显示文字
show: true,
textStyle: {
color: 'black',
fontSize:10,
}
}
}
  • 文本字体倾斜
  • 换行显示
  • 文本文字竖直显示
  • 隔一个换行

参考文章


 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议