折线图
展示效果：
代码示例：
//折线外发光、折线点的样式
let option = {
//···省略其他配置项···//
series: {
type: 'line',
itemStyle:{
color:"#FBB462"//折线颜色
},
symbol:"circle",//折线标记点的图形，可自定义图片
symbolSize: 5,//标记点的尺寸
lineStyle:{
with:100,
color:"#18b2a3",
shadowOffsetX: 0, // 折线的X偏移---外发光
shadowOffsetY: 9,// 折线的Y偏移---外发光
shadowBlur: 8, // 折线模糊---外发光
shadowColor: "rgba(24,178,163, .74)"//外发光
},
smooth: true,//折线是否平滑
data:series
}
}
饼图
展示效果：
代码示例：
//难点一：饼图背景的实现，实际实现方式为饼图叠加仪表盘。
//难点二：鼠标悬停根据不同颜做不同高亮色处理，每个环形有边框，外部仪表盘背景发光。
let option = {
//···省略其他配置项···//
series: [
//饼图主图实现
{
name: '',
type: 'pie',
radius: ['50%', '70%'],
center:['75%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#031122',//环境边框颜色
borderWidth: 4,//单独环形的边框
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
// fontSize: '20',
fontWeight: 'bold',
color:"#fff",
formatter:'{a|{d}}%\n{z|{b}}',
rich:{//富文本字体
a:{//百分比数字样式
fontSize:'18',
fontWeight: 'bold',
padding: [0, 0, 10, 0]
},
z:{
fontSize:'12'
}
}
},
itemStyle:{
borderWidth: 0,
shadowColor: ['#34DCFF', '#E5B36C', '#006CFF', '#1684B7', '#1FC4B5'],
shadowBlur: 20,
}
},
labelLine: {
show: false
},
data: series
},
//外圈仪表盘
{
name: "",
type: 'gauge',
splitNumber: 15,
radius: '110%',
center:['75%', '50%'],
startAngle: 0,
endAngle: 360,
axisLine: {
show: false,
lineStyle: {
color: [
[1, '#00b1ff']
]
}
},
axisTick: {//仪表盘刻度
show: true,
distance:0,//刻度与轴线的距离
lineStyle: {
color: '#2fbeff',
width: 1,
shadowBlur:5,//刻度线外发光
shadowColor :'#2fbeff',//刻度线外发光
},
length: 6,//刻度的长度--短边
splitNumber: 5
},
splitLine: {//分割线样式--用于做仪表盘中间分隔的长边
show: true,
distance:-4,//分割线与轴线的距离--负值即向外圈偏移，否则会向内，值约为刻度线与分割线的差值，保持内圈齐平
length: 10,//刻度的长度--长边
lineStyle: {
color: 'auto',
width: 2
}
},
axisLabel: {
show: false
},
detail: {
show: false
}
},
]
}
柱图（圆柱体）
展示效果：
代码示例：
//难点一：圆柱体实现方式为组合实现-顶部椭圆形+中间渐变色的长方形+底部椭圆形
//难点二：鼠标悬停要同时改变三个区域的颜色为橙色
let option = {
//···省略其他配置项···//
series: [
{
data: series,
// name: '柱顶部',
type: 'pictorialBar', //指定类型
//symbol标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond','pin','arrow', 'none'
//默认为圆形
symbolSize: [14, 5], //指定大小，[宽,高]
symbolOffset: [0, -3], //位置偏移 [右，下] 负数反方向
z: 20,
itemStyle: {
normal: {
color: (params)=> {
return barTopColor[0];
},
},
},
emphasis:{
itemStyle:{
color: barTopColorActive[0]
}
},
label: {
show: false,
position: 'top',
fontSize: 10
},
symbolPosition: 'end'
},
{
type: 'pictorialBar',
// name: '柱底部',
symbolSize: [14, 5],
symbolOffset: [0, 3],
z: 20,
itemStyle: {
normal: {
color: (params)=> {
return barBottomColor[0];
},
},
},
emphasis:{
itemStyle:{
color: barBottomColorActive[0]
}
},
data: series
},
{
type: 'bar',
itemStyle: {
normal: {
color: (params)=> {
return new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
//数组, 用于配置颜色的渐变过程. 每一项为一个对象,
//包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
[{
offset: 0,
color: barBottomColor[0]
},
{
offset: 1,
color: barTopColor[0]
}
]
);
},
opacity: 0.8
},
},
emphasis:{
itemStyle:{
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
//数组, 用于配置颜色的渐变过程. 每一项为一个对象,
//包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
[{
offset: 0,
color: barBottomColorActive[0]
},
{
offset: 1,
color: barTopColorActive[0]
}
]
),
shadowBlur: 20,
shadowColor: 'rgba(251,176,94, 0.5)',
}
},
z: 16,
silent: true,
barWidth: 14,
barGap: '-100%', // Make series be overlap
data: series
}
]
}
柱图（自定义图形）
展示效果：
代码示例：
//实现方式为两种图形叠加：主色渐变背景色柱体+黑色扁长方形分割图形。注意设定好间距就能使看上去为一体
let option = {
//···省略其他配置项···//
series: [
//主体色柱体渐变色
{
// name: 'line',
type: 'bar',
barGap: '-100%',
barWidth: 10,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#00E5FF' },
{ offset: 1, color: '#01ABFF' }
]),
emphasis: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FDD984' },
{ offset: 1, color: '#FBAF5D' }
]),
shadowBlur: 20,
shadowColor: 'rgba(251,175,93, 0.5)',
},
},
z: -12,
data: series
},
//黑色扁长方形分割
{
// name: 'dotted',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
color: '#031122'
},
symbolRepeat: true,
symbolSize: [14, 2],//宽度14为柱体的宽度，2为高度
symbolMargin: 2,//边距2
z: -10,
data: series
},
]
}
柱图（顶部圆角+渐变色）
展示效果：
代码示例：
//柱体渐变色+顶部圆角
let option = {
//···省略其他配置项···//
series: [
{
// name: 'bar',
type: 'bar',
barWidth: 10,
itemStyle: {
borderRadius: [5,5,0,0],//顶部圆角设置
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#21CDBB' },
{ offset: 1, color: '#01173C' }
]),
emphasis: {
color: '#21D0B9',
shadowBlur: 20,
shadowColor: 'rgba(33,208,183, 0.5)',
},
},
data: series
},
]
}
词云图
展示效果：
代码示例：
//echarts也支持词云图，只是在官网没有实例，我也是通过各方查找资料才实现出来
let option = {
series: [
{
type: "wordCloud",
// 网格大小，各项之间间距
gridSize: 15,
// cardioid心形,diamond菱形,square正方形,triangle-forward指向右边的三角形,triangle-upright正三角形
// triangle三角形，pentagon五角形，star五角星形，
shape: "circle",
// 字体大小范围
sizeRange: [10, 22],
// 文字旋转角度范围
rotationRange: [0, 0],
// 旋转步值
rotationStep: 40,
// 是否渲染超出画布的文字
drawOutOfBound:false,
left: "center",
top: "center",
right: null,
bottom: null,
width: '90%',
height: '100%',
textStyle: {
color: (params)=> {
//随机给色
return this.getWordCloundColor(params.dataIndex);
},
},
//鼠标悬停样式
emphasis: {
focus: 'self',
textStyle:{
// shadowBlur: 3,
// shadowColor: '#fff'
}
},
data: series,
},
],
}
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
