首先要下载最新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; // 范围标签显示内容。
}
}
];