常用ecahrts图表配置：
环状图
1环形图/饼图
1.1环状图
var data = [
{value: 42,name: '行业一'},
{value: 23,name: '行业二'},
{value: 70,name: '行业三'},
];
option = {
backgroundColor: 'rgba(0,0,0,0)',
tooltip: {
trigger: 'item',
formatter: "{b}: <br/>{c} ({d}%)"
},
color: [ '#20b9cf', '#2089cf', '#205bcf'],
legend: { //图例组件，颜色和名字
x: '70%',
y: 'center',
orient: 'vertical',
itemGap: 12, //图例每项之间的间隔
itemWidth: 10,
itemHeight: 10,
icon: 'rect',
data: ['行业一', '行业二', '行业三'],
textStyle: {
color: [],
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
}
},
series: [{
name: '行业占比',
type: 'pie',
clockwise: false, //饼图的扇区是否是顺时针排布
minAngle: 20, //最小的扇区角度（0 ~ 360）
center: ['35%', '50%'], //饼图的中心（圆心）坐标
radius: [40, 60], //饼图的半径
// avoidLabelOverlap: true, ////是否启用防止标签重叠
itemStyle: { //图形样式
normal: {
borderColor: 'transparent',
borderWidth: 2,
},
},
label: { //标签的位置
normal: {
show: true,
position: 'inside', //标签的位置
formatter: "{d}%",
textStyle: {
color: '#fff',
}
},
emphasis: {
show: true,
textStyle: {
fontWeight: 'bold'
}
}
},
data: data
}, {
name: '',
type: 'pie',
clockwise: false,
silent: true,
minAngle: 20, //最小的扇区角度（0 ~ 360）
center: ['35%', '50%'], //饼图的中心（圆心）坐标
radius: [0, 40], //饼图的半径
itemStyle: { //图形样式
normal: {
borderColor: '#1e2239',
borderWidth: 1.5,
opacity: 0.21,
}
},
label: { //标签的位置
normal: {
show: false,
}
},
data: data
}]
};
1.2 南丁格尔玫瑰
南丁格尔玫瑰
option = {
tooltip : {
trigger: 'item',
formatter: "{b}: <br/> {c} ({d}%)"
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'排名',
type:'pie',
color: ['#33b565', '#20cc98', '#20b9cf', '#2089cf', '#205bcf'],
radius : [20, 70],
center : ['50%', '50%'],
roseType : 'area',
data:[
{value:70, name:'NO.4'},
{value:90, name:'NO.3'},
{value:110, name:'NO.2'},
{value:150, name:'NO.1'},
{value:40, name:'NO.5'}
]
}
]
};
1.3南丁格尔玫瑰2
南丁格尔玫瑰2
option = {
backgroundColor: 'rgba(0,0,0,0)',
tooltip: {
trigger: 'item',
formatter: "{b} <br/>{c}辆"
},
legend: {
x: 'center',
y: '2%',
data: ['车型一', '车型二', '车型三', '车型四'],
icon: 'circle',
textStyle: {
color: '#fff',
}
},
calculable: true,
series: [{
name: '车型',
type: 'pie',
//起始角度，支持范围[0, 360]
startAngle: 0,
//饼图的半径，数组的第一项是内半径，第二项是外半径
radius: [51, 80],
//支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
center: ['50%', '20%'],
//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
// 'radius' 面积展现数据的百分比，半径展现数据的大小。
// 'area' 所有扇区面积相同，仅通过半径展现数据大小
roseType: 'area',
//是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
avoidLabelOverlap: false,
label: {
normal: {
show: true,
formatter: '{c}辆'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
length2: 1,
},
emphasis: {
show: true
}
},
data: [{
value: 600,
name: '车型一',
itemStyle: {
normal: {
color: '#33b565'
}
}
},
{
value: 1100,
name: '车型二',
itemStyle: {
normal: {
color: '#20cc98'
}
}
},
{
value: 1200,
name: '车型三',
itemStyle: {
normal: {
color: '#2089cf'
}
}
},
{
value: 1300,
name: '车型四',
itemStyle: {
normal: {
color: '#205bcf'
}
}
},
{
value: 0,
name: "",
label: {
show: false
},
labelLine: {
show: false
}
},
{
value: 0,
name: "",
label: {
show: false
},
labelLine: {
show: false
}
},
{
value: 0,
name: "",
label: {
show: false
},
labelLine: {
show: false
}
},
{
value: 0,
name: "",
label: {
show: false
},
labelLine: {
show: false
}
},
{
value: 0,
name: "",
label: {
show: false
},
labelLine: {
show: false
}
}
]
}]
};
2 柱状图
2.1柱状图
柱状图
var xData = function() {
var data = ['NO.1','NO.2','NO.3','NO.4','NO.5'];
return data;
}();
var data = [23, 22, 20, 30, 22]
option = {
// backgroundColor: "#141f56",
tooltip: {
show: "true",
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.4)', // 背景
padding: [8, 10], //内边距
// extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
formatter: function(params) {
if (params.seriesName != "") {
return params.name + ' ： ' + params.value + ' 辆';
}
},
},
grid: {
borderWidth: 0,
top: 20,
bottom: 35,
left:40,
right:10,
textStyle: {
color: "#fff"
}
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color:'rgba(255,255,255,0.2)',
}
},
axisLabel: {
inside: false,
textStyle: {
color: '#bac0c0',
fontWeight: 'normal',
fontSize: '12',
},
// formatter:function(val){
// return val.split("").join("\n")
// },
},
data: xData,
}, {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: xData,
}],
yAxis: {
min:10,
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)',
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)',
}
},
axisLabel: {
textStyle: {
color: '#bac0c0',
fontWeight: 'normal',
fontSize: '12',
},
formatter: '{value}',
},
},
series: [{
type: 'bar',
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00c0e9'
}, {
offset: 1,
color: '#3b73cf'
}]),
barBorderRadius: 50,
borderWidth: 0,
},
emphasis: {
shadowBlur: 15,
shadowColor: 'rgba(105,123, 214, 0.7)'
}
},
zlevel: 2,
barWidth: '20%',
data: data,
},
{
name: '',
type: 'bar',
xAxisIndex: 1,
zlevel: 1,
itemStyle: {
normal: {
color: 'transparent',
borderWidth: 0,
shadowBlur: {
shadowColor: 'rgba(255,255,255,0.31)',
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 2,
},
}
},
barWidth: '20%',
data: [30, 30, 30, 30, 30]
}
]
}
2.2柱状图2
柱状图2三角
var data = {
"chart": [{
month: "NO.1",
value: 10,
},
{
month: "NO.2",
value: 8.7,
},
{
month: "NO.3",
value: 6.8,
},
{
month: "NO.4",
value: 5.9,
},
{
month: "NO.5",
value: 5.2
}
]
}
var xAxisMonth = [],
barData = [],
lineData = [];
for (var i = 0; i < data.chart.length; i++) {
xAxisMonth.push(data.chart[i].month);
barData.push({
"name": xAxisMonth[i],
"value": data.chart[i].value
});
lineData.push({
"name": xAxisMonth[i],
"value": data.chart[i].ratio
});
}
option = {
// backgroundColor: "#020d22",
title: '',
grid: {
top: '10%',
left: '30',
bottom: '0',
right:'10',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function(params) {
return params[0]["data"].name + "<br/>" + '报警次数: ' + params[1]["data"].value+'次' ;
}
},
xAxis: [{
type: 'category',
show: false,
data: ['NO.1', 'NO.2', 'NO.3', 'NO.4', 'NO.5'],
axisLabel: {
textStyle: {
color: '#b6b5ab'
}
}
},
{
type: 'category',
position: "bottom",
data: xAxisMonth,
boundaryGap: true,
// offset: 40,
splitLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
color: "rgba(255,255,255,0.2)"
},
axisLabel: {
textStyle: {
color: '#b6b5ab'
}
}
}
],
yAxis: [{
show: true,
offset: 15,
splitLine: {
show: false,
lineStyle: {
color: "rgba(255,255,255,0.1)"
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
color: "rgba(255,255,255,0.1"
},
axisLabel: {
show: true,
color: '#b6b5ab'
}
}, {
show: false,
type: "value",
// name: "合格率(%)",
nameTextStyle: {
color: '#ccc'
},
axisLabel: {
color: '#ccc'
},
splitLine: {
show: false
},
axisLine: {
show: true
},
axisTick: {
show: true
}
}],
color: ['#e54035'],
series: [{
name: '训练人次',
type: 'pictorialBar',
xAxisIndex: 1,
barCategoryGap: '-40%',
// barCategoryGap: '-5%',
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
itemStyle: {
normal: {
color: function(params) {
var colorList = [
'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)'
];
return colorList[params.dataIndex];
}
},
emphasis: {
opacity: 1
}
},
data: barData,
},
{
symbol: 'image://data:image/png;base64,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',
symbolSize: 42,
type: "line",
yAxisIndex: 1,
data: lineData,
itemStyle: {
normal: {
borderWidth: 5,
color: {
colorStops: [{
offset: 0,
color: '#821eff'
},
{
offset: 1,
color: '#204fff'
}
],
}
}
}
}
]
}
3折线图
折线图
option = {
tooltip : {
trigger: 'axis'
},
grid: {
left: '3%',
right: '5%',
top:'8%',
bottom: '5%',
containLabel: true
},
color:['#a4d8cc','#25f3e6'],
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
axisTick:{show:false},
boundaryGap : false,
axisLabel: {
textStyle:{
color: 'rgba(255,255,255,.6)',
fontSize:'12'
},
lineStyle:{
color:'rgba(255,255,255,.1)',
},
interval: {default: 0},
// rotate:50,
formatter : function(params){
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 4;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
var tempStr = "";
tempStr=params.substring(0,4);
newParamsName = tempStr+"...";// 最终拼成的字符串
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
},
data: ['星期一','星期二 ','星期三 ','星期四','星期五','星期六','星期天']
}
],
yAxis : {
min:300,
type : 'value',
axisLabel: {
textStyle: {
color: '#ccc',
fontSize:'12',
}
},
axisLine: {
lineStyle:{
color:'rgba(160,160,160,0.2)',
}
},
splitLine: {
lineStyle:{
color:'rgba(160,160,160,0.2)',
}
},
},
series : [
{
// name:'简易程序案件数',
lineStyle:{
color:'#72b0f9',
},
type:'line',
areaStyle: {
normal: {type: 'default',
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
offset: 0,
color: 'rgba(129,197,255,.6)'
}, {
offset: 1,
color: 'rgba(129,197,255,.0)'
}], false)
}
},
smooth:true,
itemStyle: {
normal: {areaStyle: {type: 'default'}}
},
data:[580, 490, 700,450, 550, 660, 540]
}
]
};
网友评论