首先要下载最新echarts，旧版可能很多功能不支持
1.饼图中心写文字
-
var myChart = echarts.init(document.getElementById(
'row-1-1'));
-
var option = {
-
color:[
"#53647E",
"#05B6F0"],
-
title: {
-
text:
'23.5',
-
textStyle: {
-
fontSize:
18,
-
//fontFamily:'sans-serif',
-
fontStyle:
'normal',
-
color:
'#05B5EE',
-
verticalAlign:
"top"
-
},
-
subtext: [
'系统总体容量\n'],
-
subtextStyle:{
-
fontSize:
10,
-
color:
'#05B5EE'
-
},
-
/*itemGap:'50px',*/
-
x:
'center',
-
y:
'center',
-
top:
'35%'
-
},
-
tooltip: {
-
trigger:
'item',
-
formatter:
"{a} <br/>{b}: {c} ({d}%)"
-
},
-
series: [
-
{
-
//name:'系统容量',
-
type:
'pie',
-
radius: [
'65%',
'80%'],
-
avoidLabelOverlap:
false,
-
label: {
-
normal: {
-
show:
false,
-
position:
'center'
-
},
-
emphasis: {
-
show:
false,
-
textStyle: {
-
fontSize:
'30',
-
fontWeight:
'bold'
-
}
-
}
-
},
-
labelLine: {
-
normal: {
-
show:
false
-
}
-
},
-
data:[
-
{
value:
11, name:
'系统剩余容量'},
-
{
value:
12.5, name:
'系统使用容量'},
-
-
]
-
}
-
]
-
};
-
myChart.setOption(option);
设置title中的text和subtext即可，样式可以自定义
2.关于坐标轴和分割线的设置
-
var myChart = echarts.init(document.getElementById(
'row-2-2'));
-
var option = {
-
color: [
'#60CF54',
'#5EB95E',
'#c23531',
'#61a0a8',
'#d48265',
'#91c7ae',
'#749f83',
'#ca8622',
'#bda29a',
'#6e7074',
'#546570',
'#c4ccd3'],
-
tooltip : {
-
trigger:
'axis',
-
axisPointer : {
// 坐标轴指示器，坐标轴触发有效
-
type :
'shadow'
// 默认为直线，可选为：'line' | 'shadow'
-
}
-
},
-
grid: {
-
top:
'15%',
-
left:
'3%',
-
right:
'4%',
-
bottom:
'5%',
-
containLabel:
true,
-
borderColor:
"#F5F5F5"
-
},
-
xAxis :{
//x坐标
-
type :
'category',
-
data : [],
-
axisTick: {
//刻度
-
show:
false,
//不显示刻度
-
},
-
show:
false,
//横坐标直接不显示
-
},
-
yAxis : [
-
{
-
type :
'value',
-
nameTextStyle: {
-
color:
'#fff'
-
},
-
axisLine:{
//坐标轴轴线
-
show:
false,
//不显示坐标线
-
lineStyle:{
-
color:
'#fff'
-
}
-
},
-
splitNumber:
1,
//左边分割数，1位分割一次
-
axisTick: {
//刻度
-
show:
false,
//不显示刻度
-
},
-
axisLabel:{
//刻度标签
-
color:
"white",
-
show:
true,
-
fontSize:
10
-
},
-
splitLine: {
-
show:
false
//分割线
-
}
-
}
-
],
-
series : [{
-
type:
"bar",
-
barCategoryGap:
'50%',
-
data:[
100,
80,
60,
50,
20,
60,
70,
90,
20,
100,
50]
-
}]
-
};
-
myChart.setOption(option);
主要就是设置xAxis和yAxis中的axisLine,axisLabel,axisTick,splitLine,splitNumber等，具体参数看手册即可
3.关于柱状图改变柱子间隔问题
-
series : [{
-
type:
"bar",
-
barCategoryGap:
'50%',
-
data:[
100,
80,
60,
50,
20,
60,
70,
90,
20,
100,
50]
-
}]
如果只有一组数据，想调整柱子间隔，在series中使用barCategoryGap调整即可
如果有多组数据，则需要使用barGap来调整类目之间的间距
4.关于一组数据改变柱状图颜色问题
-
series : [{
-
type:
"bar",
-
barCategoryGap:
'70%',
-
data:[
100,
80,
60,
50,
20],
-
itemStyle: {
-
normal:{
-
color: function (params){
-
var colorList = [
'#455B72',
'#A5AFB5',
'#D44191',
'#45A5D5',
'#15BCB5'];
-
return colorList[params.dataIndex];
-
}
-
},
-
},
-
markLine : {
-
data : [
-
{
type :
'average', name:
'平均值'}
-
],
-
lineStyle: {
-
color:
'#ddd',
-
width:
1,
-
type:
'dashed',
-
/*shadowBlur: ...,
-
shadowColor: ...,
-
shadowOffsetX: 0,
-
shadowOffsetY: 0,
-
opacity: ...,
-
curveness: 0,*/
-
}
-
}
-
}]
在series中设置itemStyle，像这个设置颜色即可
5.关于折线图不同数值区间颜色不同问题
-
var option = {
-
title: {
-
text:
'ECharts 入门示例'
-
},
-
tooltip: {},
-
legend: {
-
data:[
'销量']
-
},
-
xAxis: {
-
data: [
"衬衫",
"羊毛衫",
"雪纺衫",
"裤子",
"高跟鞋",
"袜子"]
-
},
-
yAxis: {},
-
visualMap: {
//区间内控制显示颜色
-
show:
false,
-
dimension:
1,
-
pieces: [[{gte:
7, lte:
15, color:
'#7547A2'},{gte:
15, lte:
30, color:
'#000'}]],
//设置折线什么区间显示什么颜色
-
seriesIndex:
0,
-
outOfRange: {
//设置区间外的颜色
-
color:
'red'
-
}
-
},
-
series: [{
-
name:
'销量',
-
type:
'line',
-
areaStyle: {normal: {}},
//加上这个使折线下方填充颜色
-
-
data: [
5,
20,
36,
10,
10,
20]
-
}
-
]
-
};
在visualMap中设置pieces，其中可设置最大最小区间内折线的颜色，series中如果设置了areaStyle，则对应的区间内填充颜色也会相应改变，就像图中那样
附visualMap的配置
-
visualMap=[
//视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。
-
// colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。
-
{
-
show:
true,
//是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
-
type:
'continuous',
// 定义为连续型 viusalMap
-
min:
10,
//指定 visualMapContinuous 组件的允许的最小值
-
max:
100,
//指定 visualMapContinuous 组件的允许的最大值
-
range:[
15,
40],
//指定手柄对应数值的位置。range 应在 min max 范围内
-
calculable:
true,
//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
-
realtime:
true,
//拖拽时，是否实时更新
-
inverse:
false,
//是否反转 visualMap 组件
-
precision:
0,
//数据展示的小数精度，默认为0，无小数点
-
itemWidth:
20,
//图形的宽度，即长条的宽度。
-
itemHeight:
140,
//图形的高度，即长条的高度。
-
align:
"auto",
//指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
-
text:[
'High',
'Low'],
//两端的文本
-
textGap:
10,
//两端文字主体之间的距离，单位为px
-
dimension:
2,
//指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
-
seriesIndex:
1,
//指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
-
hoverLink:
true,
//鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
-
inRange:{
//定义 在选中范围中 的视觉元素
-
color: [
'#121122',
'rgba(3,4,5,0.4)',
'red'],
-
symbolSize: [
30,
100]
-
},
-
outOfRange:{
//定义 在选中范围外 的视觉元素。
-
color: [
'#121122',
'rgba(3,4,5,0.4)',
'red'],
-
symbolSize: [
30,
100]
-
},
-
zlevel:
0,
//所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
-
z:
2,
//所属组件的z分层，z值小的图形会被z值大的图形覆盖
-
left:
"center",
//组件离容器左侧的距离,'left', 'center', 'right','20%'
-
top:
"top",
//组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
-
right:
"auto",
//组件离容器右侧的距离,'20%'
-
bottom:
"auto",
//组件离容器下侧的距离,'20%'
-
orient:
"vertical",
//图例排列方向
-
padding:
5,
//图例内边距，单位px 5 [5, 10] [5,10,5,10]
-
backgroundColor:
"transparent",
//标题背景色
-
borderColor:
"#ccc",
//边框颜色
-
borderWidth:
0,
//边框线宽
-
textStyle:mytextStyle,
//文本样式
-
formatter:
function (value) {
//标签的格式化工具。
-
return
'aaaa' + value;
// 范围标签显示内容。
-
}
-
},
-
{
-
show:
true,
//是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
-
type:
'piecewise',
// 定义为分段型 visualMap
-
splitNumber:
5,
//对于连续型数据，自动平均切分成几段。默认为5段
-
pieces: [
//自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
-
{
min:
1500},
// 不指定 max，表示 max 为无限大（Infinity）。
-
{
min:
900,
max:
1500},
-
{
min:
310,
max:
1000},
-
{
min:
200,
max:
300},
-
{
min:
10,
max:
200,
label:
'10 到 200（自定义label）'},
-
{
value:
123,
label:
'123（自定义特殊颜色）',
color:
'grey'},
// 表示 value 等于 123 的情况。
-
{
max:
5}
// 不指定 min，表示 min 为无限大（-Infinity）。
-
],
-
categories:[
'严重污染',
'重度污染',
'中度污染',
'轻度污染',
'良',
'优'],
//用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集
-
min:
10,
//指定 visualMapContinuous 组件的允许的最小值
-
max:
100,
//指定 visualMapContinuous 组件的允许的最大值
-
minOpen:
true,
//界面上会额外多出一个『< min』的选块
-
maxOpen:
true,
//界面上会额外多出一个『> max』的选块。
-
selectedMode:
"multiple",
//选择模式，可以是：'multiple'（多选）。'single'（单选）。
-
inverse:
false,
//是否反转 visualMap 组件
-
precision:
0,
//数据展示的小数精度，默认为0，无小数点
-
itemWidth:
20,
//图形的宽度，即长条的宽度。
-
itemHeight:
140,
//图形的高度，即长条的高度。
-
align:
"auto",
//指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
-
text:[
'High',
'Low'],
//两端的文本
-
textGap:
10,
//两端文字主体之间的距离，单位为px
-
showLabel:
true,
//是否显示每项的文本标签
-
itemGap:
10,
//每两个图元之间的间隔距离，单位为px
-
itemSymbol:
"roundRect",
//默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
-
dimension:
2,
//指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
-
seriesIndex:
1,
//指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
-
hoverLink:
true,
//鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
-
inRange:{
//定义 在选中范围中 的视觉元素
-
color: [
'#121122',
'rgba(3,4,5,0.4)',
'red'],
-
symbolSize: [
30,
100]
-
},
-
outOfRange:{
//定义 在选中范围外 的视觉元素。
-
color: [
'#121122',
'rgba(3,4,5,0.4)',
'red'],
-
symbolSize: [
30,
100]
-
},
-
zlevel:
0,
//所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
-
z:
2,
//所属组件的z分层，z值小的图形会被z值大的图形覆盖
-
left:
"center",
//组件离容器左侧的距离,'left', 'center', 'right','20%'
-
top:
"top",
//组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
-
right:
"auto",
//组件离容器右侧的距离,'20%'
-
bottom:
"auto",
//组件离容器下侧的距离,'20%'
-
orient:
"vertical",
//图例排列方向
-
padding:
5,
//图例内边距，单位px 5 [5, 10] [5,10,5,10]
-
backgroundColor:
"transparent",
//标题背景色
-
borderColor:
"#ccc",
//边框颜色
-
borderWidth:
0,
//边框线宽
-
textStyle:mytextStyle,
//文本样式
-
formatter:
function (value) {
//标签的格式化工具。
-
return
'aaaa' + value;
// 范围标签显示内容。
-
}
-
}
-
];
2943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
