文章目录
bar 柱状图pie 饼图radar雷达图scatter散点图
bar 柱状图
最终效果如图：
代码展示：
option = {
color: ['#E786D7', '#7F7FD5'], // 修改柱状图的颜色
legend: {}, // 图例组件，用来显示Designer和User的图例
dataset: { // 数据集组件，可对数据进行单独管理，可参考官网：https://echarts.apache.org/zh/option.html#dataset
source: [ // 原始数据
['role', 'Designer', 'User'], // 表示维度名
['造型样式', 65, 43],
['材质', 67, 98],
['色彩', 75, 68],
['表带', 86, 98],
['表盘', 93, 43],
['整体感觉', 76, 76],
['综合评分', 87, 68]
]
},
xAxis: { // x轴
type: 'category',
},
yAxis: {}, // y轴
series: [ // 表示这是柱状图
{ type: 'bar' }, { type: 'bar' } // 有两个柱状图
]
};
最终效果如图： 代码展示：
option = {
// title: {
// text: '标题'
// },
// tooltip: { // 提示框
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
// },
// legend: {}, // 图例
grid: {
width: 200,
height: 100
},
xAxis: {
type: 'value',
min: 0,
max: 150,
splitNumber: 5,
splitLine: {
lineStyle: {
type: 'dashed',
color: '#117B8E',
opacity: 0.4,
}
},
},
yAxis: {
type: 'category',
axisTick: {
show: false
},
data: ['1', '2', '3', '4'],
},
series: [
{
type: 'bar',
data: [93, 37, 53, 95],
barWidth: 15, // 设置柱状图的宽度
itemStyle: {
// color: '#117B8E', // 设置柱状图的颜色
// opacity: 0.4
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0, // 从左往右
[
{offset: 0, color: '#00c0ff'},
{offset: 1, color: '#00c0ff'}
]
),
opacity: 0.6 // 设置渐变色的透明度
}
},
label: { // 文本标签 添加横线
show: true,
position: 'right', // 或者 'insideRight'
color: '#23fffc',
fontWeight: 900,
formatter: '▉ {c}',
offset: [-10,1]
}
},
],
// 使用graphic组件在柱子末尾添加横线
// graphic: [
// {
// z: 10,
// type: 'line',
// shape: {
// x1: 205, y1: 140,
// x2: 205, y2: 155
// },
// style: {
// stroke: '#23fffc',
// lineWidth: 2
// }
// },
// {
// z: 10,
// type: 'line',
// shape: {
// x1: 209, y1: 65,
// x2: 209, y2: 80
// },
// style: {
// stroke: '#23fffc',
// lineWidth: 2
// }
// },
// ]
};
最终效果如图：
代码展示：
option = {
dataset: {
source: [
['周一', 35],
['周二', 57],
['周三', 75],
['周四', 56],
['周五', 63],
['周六', 76],
['周日', 47]
]
},
xAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
}
},
yAxis: {
show: false,
splitLine: {
show: false
},
max: 100
},
series: [
{
type: 'bar' ,
itemStyle: {
barBorderRadius: 27,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(130, 63, 215, 0.89)'},
{offset: 1, color: 'rgba(100, 36, 234, 1)'}
]
)
},
barWidth: '50%'
}
]
};
最终效果如图： 代码展示：
// 这里按顺序修改文字
let xData = ['10% 集团XX', '10% XX公司', '10% 制水公司', '10% 供水公司','10% 排水公司', '10% 污水公司', '10% XX公司', '10% 水中心','10% 水务建设','10% 业务受理','10% 水务发展']
// 这里按顺序修改长度
let yData = ['70', '75', '76', '90', '95', '70', '75', '76', '90', '95', '90']
// 这里按顺序修改颜色
let colorList = ['red', '#75f5ff', '#00deff', '#0093ff', '#2a5fcf', 'green', '#75f5ff', '#00deff', '#0093ff', '#2a5fcf', 'blue']
var option = {
angleAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
clockwise: true // 设置顺时针
},
radiusAxis: {
type: 'category',
data: xData,
z: 100,
axisLine: {
// show: false
},
axisTick: {
show: false
},
axisLabel: {
// show: false
interval: '0', // 调整刻度显示
// textStyle: {
// fontSize: 20, // 设置文字大小
// color: 'red' // 设置文字颜色
// }
},
splitLine: {
show: false
}
},
polar: {
radius: [50 ,'90%']
},
tooltip: {
trigger: 'item',
formatter: function (params, ticket, callback) {
return params.name + ' : ' + ' (' + params.data + '%)'
}
},
series: [
{
type: 'bar',
barWidth: '30%', // 设置柱子宽度为类别间距的百分比值
data: yData,
coordinateSystem: 'polar',
itemStyle: {
normal: { // 颜色显示
color: function (params) {
return colorList[params.dataIndex]
}
}
},
showBackground: true, // 显示柱子背景
},
{
type: 'scatter',
data: yData,
coordinateSystem: 'polar',
name: 'A',
stack: 'a',
emphasis: {
focus: 'series'
},
symbolSize: '15',
itemStyle: {
color: function (params) {
return colorList[params.dataIndex]
}
}
}
]
}
pie 饼图
最终效果如图： 注: 这个效果由中间白色的饼图和外围的环形图构成 代码展示：
option = {
series: [
{
name: '中间圆形',
type: 'pie', // 表示这是一个饼图
radius: ['0', '50%'], // 分别表示这个圆形的内半径和外半径
center: ['50%', '50%'], // 表示这个圆形的圆心所在位置
label: { // 饼图图形上的文本标签，可用于说明图形的一些数据信息
show: false // 不进行标签显示
},
data: [ // 表示数据内容
{
value: 1, // 数据值
itemStyle: { // 定义图形样式
color: '#FFFFFF' // 该中间圆形的颜色为白色
},
tooltip: { // 鼠标移入的提示框设置
show: false // 不显示提示
}
}
]
},
{
name: '环形',
type: 'pie',
radius: ['50%', '70%'], // 分别表示这个环形的内半径和外半径
labelLine: {
show: false // 不显示视觉引导线
},
itemStyle: { // 颜色渐变设置
normal: {
color: (list) => {
var colorList = [
{
colorStart: '#7F7FD5', //数据占有的部分开始颜色
colorEnd: '#C9A1DE' // 结束颜色
},
{
colorStart: '#ECE8F3',
colorEnd: '#ECE8F3'
}
]
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ // 左、下、右、上
offset: 0,
color: colorList[list.dataIndex].colorStart
}, {
offset: 1,
color: colorList[list.dataIndex].colorEnd
}])
}
}
},
data: [
{ value: 20}, // 数据占有的部分
{ value: 80 } // 剩余部分
]
}
]
};
radar雷达图
最终效果如图： 代码展示：
option = {
legend: { // 图例
data: ['User', 'Designer'],
left: 0, // 图例被放置的位置
top: 90,
orient: 'vertical' // 图例列表的布局朝向，竖向表示，横向为：'horizontal'
},
radar: {
indicator: [ // 雷达图的指示器
{ name: '造型样式', max: 6 }, // 包含名字和最大值
{ name: '材质', max: 6 },
{ name: '色彩', max: 6 },
{ name: '表带', max: 6 },
{ name: '表盘', max: 6 },
{ name: '整体感觉', max: 6 }
],
splitArea: { // 不显示分隔区域
show: false
},
axisName: { // 指示器名字
color: '#474747', // 设置颜色
fontSize: 10 // 设置字体大小
},
nameGap: 5, // 设置指示器名称和指示器轴的距离
radius: '65%', // 设置指示器外半径和内半径的大小，也就是设置这个指示器的大小
axisLine: { // 设置坐标轴轴线，就是从中心向外的线段
lineStyle: {
color: 'rgba(176,176,176,0.7)' // 设置坐标轴线线的颜色
}
},
splitLine: { // 设置坐标轴在grid区域中的分隔线，就是一圈一圈向外扩大的线段
lineStyle: {
color: 'rgba(176,176,176,0.7)' // 设置颜色
}
}
},
series: [
{
type: 'radar', // 表示该图为雷达图
color: ['#7F7FD5', 'rgba(231,134,215,0.6)'], // 设置该雷达图不同对象的颜色
data: [ // 设置该雷达图不同对象的数据列表
{
value: [
4,
4,
5,
5,
4,
5
],
name: 'User' // 设置该数据列表所表示的对象
},
{
value: [
5,
5,
4,
5,
4,
4
],
name: 'Designer'
}
],
areaStyle: { // 设置区域填充样式，即各种数据连起来的整片区域
opacity: 0.5 // 设置其透明度
}
}
]
};
scatter散点图
最终效果如图： 代码展示：
option = {
xAxis: { // 设置直角坐标系grid中的 x 轴
splitLine: { // 删除xAxis的分隔线
show: false
},
minorTick: { // 删除xAxis的次刻度线
show: false
},
minorSplitLine: { // 删除xAxis的次分隔线
show: false
},
axisLine: { // 设置坐标轴轴线
lineStyle: {
type: 'dashed', // 设置坐标轴轴线类型为点状
color: '#C5CAD1' // 设置坐标轴轴线颜色
}
},
axisTick: { // 不显示坐标轴刻度
show: false
},
axisLabel: { // 设置坐标轴刻度标签
color: '#3B3B4D' // 设置坐标轴刻度标签的颜色
},
min: 0, // 设置坐标轴刻度最小值
max: 0.3 // 设置坐标轴刻度最大值
},
yAxis: { // 设置直角坐标系grid中的y轴，其他配置选项与x轴相似
splitLine: {
show: false
},
minorTick: {
show: false
},
minorSplitLine: {
show: false
},
axisLine: {
lineStyle: {
type: 'dashed',
color: '#C5CAD1'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#3B3B4D'
},
min: 0,
max: 100
},
series: [
{
type: 'scatter', // 表示该图为散点图
colorBy: 'data', // 设置数据项颜色，使每个数据项都有不同的颜色
// itemStyle: {
// color: function (params) {
// // 根据数据项所在象限设置不同颜色
// if (params.data[0] > 0 && params.data[1] > 0) {
// return '#9AEE9B'
// } else if (params.data[0] < 0 && params.data[1] > 0) {
// return '#E786D8'
// } else if (params.data[0] < 0 && params.data[1] < 0) {
// return '#9E9E9E'
// } else {
// return '#7F7FD5'
// }
// }
// },
symbol: 'roundRect', // 设置数据项标记的形状
symbolSize: [18, 6], // 设置数据项标记的形状大小
data: [ // 设置数据，第三个数据项为数据标记后的文本标签，在下方的函数中进行设置
[0.265, 89, '造型样式'],
[0.103, 67, '材质'],
[0.039, 95, '色彩'],
[0.137, 80, '表带'],
[0.163, 77, '表盘'],
[0.169, 90, '整体感觉']
],
label: { // 设置图形上的文本标签
show: true, // 显示图形上的文本标签
position: 'right', // 设置图形上文本标签的位置
fontSize: 10, // 设置图形上文本标签的字体大小
color: '#474747', // 设置图形上文本标签的字体颜色
formatter: function (params) { // 标签内容格式化函数，将其设置为数据data里面的第三个数据项
return params.value[2]
}
}
}
]
};
推荐链接
您阅读本篇文章共花了：
发表评论