前言
本人也入职了一个多月，也接触并做了好多项目，这一篇文章集中介绍自己写过的echarts图表，更多的图表还在整理中。
渐变色柱状图
option = {
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: '#74fcf4' // 0% 处的颜色
},
{
offset: 0.5, color: '#50c8f9' // 50% 处的颜色
},
{
offset: 1, color: '#268dff' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#ffd300' // 0% 处的颜色
}, {
offset: 1, color: '#ffd300' // 100% 处的颜色
}],
global: false // 缺省为 false
}
],
legend: {
top: 30,
right: 72,
itemHeight: 4,
align: 'right',
textStyle:{
fontSize: 12,
color:'#50c8f9',
}
},
grid: [
{ x: '6%', y: '12%', width: '88%', height: '72%'},
],
tooltip: {},
dataset: {
dimensions: ['product', '2015', '2016'],
source: [
{product: '一年级', '2015': 43, '2016': 85},
{product: '二年级', '2015': 83, '2016': 73},
{product: '三年级', '2015': 86, '2016': 65},
{product: '四年级', '2015': 72, '2016': 39},
{product: '五年级', '2015': 72, '2016': 59},
{product: '六年级', '2015': 123, '2016': 53},
{product: '七年级', '2015': 72, '2016': 80},
{product: '八年级', '2015': 7, '2016': 53},
{product: '九年级', '2015': 40, '2016': 153},
]
},
xAxis: {
type: 'category',
splitLine:{ show: false }, //去网格线
axisLine: {
lineStyle: {
type: 'solid',
color: '#50c8f9',//左边线的颜色
width:'1'//坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#50c8f9',//坐标值得具体的颜色
}
},
},
yAxis: {
splitLine:{
show: true, //是否显示网格线
lineStyle: {
type: 'solid',
color: '#004bad',//网格线的颜色
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#004bad',//左边线的颜色
width:'0'//坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#50c8f9',//坐标值得具体的颜色
},
formatter: function (value, index) {
return value + '人';
}
}
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{type: 'bar', name: '请假', barWidth: 22},
{type: 'bar', name: '异常', barWidth: 22}
]
};
类似进度条的渐变色图表
option = {
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, color: '#74fcf4' // 0% 处的颜色
},
{
offset: 0.5, color: '#50c8f9' // 50% 处的颜色
},
{
offset: 1, color: '#ffd300' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0,75,173,0.9)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0,75,173,0.1)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
],
// 标题组件，包含主标题和副标题
/*
title:{
show:true,
text:"执行任务",
x:"center",
textStyle:{
fontSize:"15",
color:"green",
fontWeight:"bold",
}
},
*/
// 提示框组件
tooltip: {
//是否显示提示框组件，包括提示框浮层和 axisPointe
show:false,
// 触发类型: item:数据项触发，axis：坐标轴触发
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
// // 图例
// legend: {
// orient: 'vertical',
// x: 'left',
// data:['完成率']
// },
// 系列列表。每个系列通过 type 决定自己的图表类型
series: [ { // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 name:'任务进度', type:'pie', // 饼图的半径，数组的第一项是内半径，第二项是外半径 radius: ['50%', '70%'],
// 是否启用防止标签重叠策略，默认开启
avoidLabelOverlap: false,
hoverAnimation: false,
// 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
labelLine: {
normal: {
show: false
}
},
data:[
{ // 数据值
value:40,
// 数据项名称
name:'异常/应打卡',
//该数据项是否被选中
selected:false,
// 单个扇区的标签配置
label: {
normal: {
// 是显示标签
show: true,
position: 'center',
fontSize: 20,
// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
formatter:'{d}/100\n{b}',
}
},
},
{
value:60,
label:{
normal:{
show:false,
}
}
},
]
}
]
};
饼图分层显示
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
name: '总数',
type: 'pie',
color: '#fff',
selectedMode: 'single',
radius: [0, '26%'],
center: ['50%', '45%'],
labelLine: {
show: false
},
label: {
position: 'center',
fontSize: '13',
color: '#333',
lineHeight: 13,
},
data:[
{
value: 40,
name:'总数\n'+40
}
]
},
{
name: '类型',
type: 'pie',
radius: ['25%', '55%'],
center: ['50%', '45%'],
label: {
show: true,
position: 'inner',
fontSize: '12px',
color: '#555',
},
color:['#FF8564', '#54ABFF', '#5FE9BA', '#9677EE', '#F9C076'],
data: [
{
value: 12,
name:'一'
},
{
value: 14,
name:'二'
},
{
value: 8,
name:'三'
},
{
value: 6,
name:'四'
},
]
},
{
name: '处理状态',
type: 'pie',
radius: ['55%', '75%'],
center: ['50%', '45%'],
label: {
show: true,
position: 'inner',
fontSize: '12px',
color: '#666',
},
color:['', '', '', '', '#FFB5A1', '#EC7757', '#A8D4FF', '#3F98EF', '#AFFFE4', '#3ED19F', '#C5B1FF', '#aa77ff'],
data: [
{
value: 4,
name: '一未处理'
},
{
value: 8,
name:'一已处理'
},
{
value: 7,
name:'二未处理'
},
{
value: 7,
name:'二已处理'
},
{
value: 3,
name:'三未处理'
},
{
value: 5,
name:'三已处理'
},
{
value: 3,
name:'四未处理'
},
{
value: 3,
name:'四已处理'
},
]
}
]
}
//赋值方法
if(res.value && res.value.length){
var statistics = res.value
let total = 0; //总数
let arr1 = []; //类型
let arr2 = []; //处理状态
statistics.forEach((item,i)=>{
total = total + item.dealWithCount + item.noDealWithCount
arr1.push({ name : item.name, value : item.dealWithCount + item.noDealWithCount })
arr2.push({ name : item.name+'未处理', value : item.noDealWithCount })
arr2.push({ name : item.name+'已处理', value : item.dealWithCount })
})
option.series[0].data = [ {value: total,name:'总数\n'+total} ]
option.series[1].data = arr1;
option.series[2].data = arr2;
// arr1.forEach((item)=>{
// let percent = (item.value / total)*100;
// item.percent = percent+'%'
// })
// this.legends = arr1
// this.legends = this.legends.concat(this.legend)
}
