ECharts配置项

配置流程

这里不推荐使用 var,毕竟是全局变量,window 都可以直接拿出来值。要使用就用 闭包形式 :

1
2
3
4
5
6
(function () {
"use strict";

// Code goes here

})();

引用全局变量或者是外层 IIFE 的变量,可以通过下列方式传参:

1
2
3
4
5
6
7
(function ($, w, d) {
"use strict";

$(function () {
w.alert(d.querySelectorAll("div").length);
});
})(jQuery, window, document);

不错的参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1. 实例化对象
let myChart = echarts.init(document.querySelector("包裹echarts图形最近的div"));
console.log(myChart);
// 2. 指定配置项和数据
let option = {
内容,
};
// 3. 把配置项给实例对象
if (typeof option === "object") {
myChart.setOption(option);
}
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});

有时候我们可能会因为样式的问题,语法没有问题,但是 echarts 却没有显示出来,那是因为它现在的高度是 0。那么我们就需要设置点样式了

1
2
3
4
5
6
7
8
<style>
.panel,
.chart {
width: 500px;
height: 400px;
background-color: rgb(19, 75, 159);
}
</style>

基本配置

title 标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
title: {
text: '(个)',
subtext: '最新统计表', //小标题
subtextStyle: {
color: '#ff4536' //小标题颜色
},
left: 10,
top: 20,
textStyle: {
color: '#03ECFB', //标题颜色
fontSize: 10,
fontWeight: 10
}
},

color 图形的颜色设置

1
color: ["#2f89cf"],

tooltip 悬浮提示框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
tooltip: {
// 'item'数据项图形触发, 'axis'坐标轴触发,
trigger: "axis",
// 提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。
// 绝对位置,相对于容器左侧 10px, 上侧 10 px
// position: [10, 10],
// 相对位置,放置在容器正中间
// position: ['50%', '50%'],
// trigger 为'item'时:inside鼠标所在图形的内部中心位置,top图形上侧,left图形左侧,right图形右侧,bottom图形底侧
position: 'bottom',
// 同时鼠标移动和点击时触发
triggerOn: 'mousemove|click',
// 鼠标是否可进入提示框浮层中
enterable: true,
// 是否将 tooltip 框限制在图表的区域内。
confine: true,
// 格式化的显示内容
formatter: '{a} <br/>{b}: {c} ({d}%)',
}

textStyle

1
2
3
textStyle: {
color: '#03ECFB' // 悬浮文字颜色
},

axisPointer 坐标轴指示器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "cross", // 默认为直线,可选为:'line'直线 | 'shadow'阴影部分 | 'cross'十字架
// 坐标轴指示器是否自动吸附到点上。默认自动判断。可以自动寻找细小的数值点
snap: false,
// 坐标轴指示器的文本标签
label: {
color: 'red'
},
animation: true,
// axisPointer.type 为 'cross' 时有效。 还有lineStyle,shadowStyle
crossStyle: {
// 线的颜色
color: 'green',
type: 'solid'
}
}

grid 修改图表的大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
grid: {
// grid 组件离容器左侧的距离。
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
// 组件的宽度
width: '450px',
// 组件的高度
height: '400px',
// z值小的图形会被z值大的图形覆盖。 或者zlevel
z: 1,
// grid 区域是否包含坐标轴的刻度标签。
containLabel: true
}

textStyle 文本颜色

1
2
3
textStyle: {
color: "#03ECFB",
}

legend 图例组件

1
2
3
4
5
6
7
legend: {
data: ['流量', '降雨量'],
left: 10,
textStyle: {
color: "#03ECFB" // 文字颜色
}
}

toolbox 工具栏

1
2
3
4
5
6
7
8
9
10
11
12
toolbox : {
// 是否显示工具栏组件
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
// 还原
restore : {show: true},
// 保存为图片
saveAsImage : {show: true}
}
},

dataZoom 区域缩放

1
2
3
4
5
dataZoom: [  //放大缩小
{
type: 'inside'
}
],

xAxis 横坐标

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
xAxis: [
{
// 'value' 数值轴,适用于连续数据。
// 'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
// 'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
// 'log' 对数轴。适用于对数数据。
type: "category",
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
// 不显示x坐标轴的样式(也就是对轴的颜色、weight等的修改)
axisLine: {
show: false,
},
},
];

splitLine 网格线

1
2
3
4
5
6
7
8
splitLine: {
show: true,
interval: 0, // 0表示不间断显示网格线
lineStyle: {
color: "#3e3b3d", // 不填color就默认跟原本的颜色一样
type: 'dotted' //设置网格线类型 dotted:虚线 solid:实线
}
}

axisLine 设置 x 轴坐标线的样式

1
2
3
4
5
6
7
axisLine: {
lineStyle: {
type: 'solid',
color: '#161616',//x轴坐标线的颜色
width:'1'//x轴坐标线的宽度
}
},

axisTick 坐标轴刻度

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
axisTick: {
// 类目轴中在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐。
alignWithLabel: true,
// 默认auto,0显示所有刻度,如果设置为 1,表示『隔一个标签显示一个刻度』,如果值为 2,表示隔两个标签显示一个刻度,以此类推
interval: 0,
// 坐标轴刻度是否朝内,默认朝外。朝内就可能看不到刻度线啦
inside: false,
// 坐标轴刻度的长度(高度)
length: 20,
// 刻度线的样式设置
lineStyle: {
// 如果刻度线的宽度 < 图形的宽度,那么就会被图形遮盖,显示不出来
color: 'red',
width: 30,
// 图形透明度
opacity: 0.5,
// 以下设置没见效果
type: 'dashed',
// 阴影颜色
shadowColor: 'green',
// 图形阴影的模糊大小
shadowBlur: 10,
// 阴影水平方向上的偏移距离。
shadowOffsetY: 100,
//设置网格线类型 dotted:虚线
type: 'dotted'
}
}

nameTextStyle 坐标轴名称的文字样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
nameTextStyle: {
color: '',
// 坐标轴名称文字字体风格'normal','italic','oblique'
fontStyle: 'italic',
fontWeight: '',
fontFamily: '',
fontSize: '',
// 文字水平对齐方式,默认自动,需要与rich同用
align: '',
// 文字垂直对齐方式,默认自动
verticalAlign: bottom,
rich: {
a: {
// 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom
}
},
lineHeight: '',
backgroundColor: ''
// 等等,参照:https://www.echartsjs.com/zh/option.html#xAxis.type
}

axisLabel 修改刻度标签文字相关样式

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
axisLabel: {
color: "rgba(255,255,255,.6) ",
// 刻度线文字样式
fontSize: "12",
// 刻度标签与轴线之间的距离
margin: 30,
//旋转x轴的文字
rotate: 10,
formatter: '{value}', // {value} kg
// 坐标轴刻度标签的显示间隔
interval: 0,
// 文字水平对齐方式,默认自动'left', 'center', 'right'
align: 'center',
// 文字垂直对齐方式 'top', 'bottom', 'middle'
verticalAlign: 'bottom',
// 行高
lineHeight: 20,
rich: {
a: {
// 没有设置 `lineHeight`,则 `lineHeight` 为 56
}
},
// 文字块背景色, 这里支持背景图片
backgroundColor: {
image: 'https://cdn.jsdelivr.net/gh/onecoderly/cdn/static/images/dog.jpg'
},
// 文字块边框颜色
borderColor: 'pink',
// 文字块边框宽度。
borderWidth: 20,
// 文字块的圆角
borderRadius: 10,
// backgroundColor: '#123234',
// 是否显示刻度标签
show: true
}

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
yAxis: [
{
type: "value",
min: 0,
max: 100,
// 每格增长
interval: 20,
// 修改刻度标签 相关样式
axisLabel: {
color: "rgba(255,255,255,.6) ",
fontSize: 12,
},
// y轴的线条改为了 2像素
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 2,
},
},
// y轴分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
];

series 系列列表

两根折线

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
series: [
{
// 需要对应legend中数据
name: "共收录的",
data: data.dataList, // ajax请求回来的数据
type: "line",
lineStyle:{ //设置折线颜色
normal:{
color:'#ffa414',
width:3
}
}
},
{
name: "被引用的",
data: data.dataList1,
type: "line",
// 折线是否平滑,为true就是可弯曲的
smooth: true
itemStyle: {
normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
offset: 0, color: '#81befd' // 0% 处的颜色,最上面
}, {
offset: 0.4, color: '#e4f2ff' // 100% 处的颜色
}, {
offset: 1, color: '#fff' // 100% 处的颜色,最下面
}]
), //区域背景渐变色
lineStyle: { // 系列级个性化折线样式
width: 3,
type: 'solid',
color: "#0180ff" //折线的颜色
}
},
emphasis: {
color: '#0180ff',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'dotted',
color: "0180ff"
}
}
},//线条样式
},
],

一根折线一个柱状图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
series: [
{
name: "验证",
data: data.dataList,
type: "line",
},
{
name: "证照引用",
type: "bar",
barWidth: "30%",
// 使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用 注意配置这个不然都会以右边的y轴数值为基准
yAxisIndex: 1,
data: data.dataList1,
},
];

柱状图

1
2
3
4
5
6
7
8
9
10
11
12
series: [
{
name: "直接访问",
type: "bar",
barWidth: "35%",
data: [200, 300, 300, 900, 1500, 1200, 600],
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5,
},
},
];

饼图

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
series: [
{
name: "",
type: "pie",
radius: ["50%", "70%"],
avoidLabelOverlap: false,
label: {
show: true,
position: "inside",
fontSize: 17,
formatter: "{b|{b}}\n {c}\t\t {d}%",
rich: {
// 自定义文字标签样式
b: {
fontSize: 16,
lineHeight: 33,
color: "#fff",
},
},
},
// 高亮的扇区和标签样式
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
},
},
// 是否显示视觉引导线
labelLine: {
show: false,
},
data: [
{ value: data.dataList, name: "行政审批证照" },
{ value: data.dataList1, name: "电子证照" },
],
},
];

饼状图、柱状图、折线图的大小

1、饼状图,直接在 series 里面,通过改变 radius 和 center 的大小值就可以调整大小。

2、柱状图和折线图的大小通过调整 grid 里面的值。

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信