Web常用图（Echarts）

关注

原创最新推荐文章于 2026-05-21 08:52:48 发布 831 阅读 AI 写同款· GEO 优化 ›

echarts3d饼图，环形图（包含透明效果）效果图：饼图：环形图：带透明度的环形图：安装echarts “echarts”:"^5.1.2" “echarts-gl”:"^2.0.8" import Vue from ‘vue’ import * as echarts from ‘echarts’ import ‘echarts-gl’ // 3d图表库 Vue.prototype.$echarts = echarts .vue文件【bindListen方法可以提取到mixins里面，以供组件多次调用】 &l. 阅读详情

下面的程序来源于

Echarts开源社区：https://www.makeapie.com/explore.html#sort=ranktimeframe~timeframe=all~author=all

Echarts官网：https://echarts.apache.org/examples/zh/index.html

我将下面的echarts图封装在了一个js文件中，放在了git上，有兴趣的可以下载（文件名Drawing.js）：地址：https://github.com/MasonYyp/vue_file

1 折线图

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
symbol: 'triangle',
symbolSize: 20,
lineStyle: {
color: '#5470C6',
width: 4,
type: 'dashed'
},
itemStyle: {
borderWidth: 3,
borderColor: '#EE6666',
color: 'yellow'
}
}]
};

2 条形图

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
let colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
return colorList[params.dataIndex % colorList.length];
}
}
}
}]
};

3 柱状图

var xData = ["2020-01", "2020-02", "2020-03", "2020-04", "2020-05", "2020-06"]
var line = ["1030", "205", "84","568","689","4587"];

option = {
xAxis: [{
data: xData,
axisLabel: {
textStyle: {
fontSize:14
},
margin: 30
},

axisLine: {
show: false //不显示x轴
},
axisTick: {
show: false //不显示刻度
}
}],
yAxis: {
type: 'value'
},
series: [
{//柱底圆片
name: "",
type: "pictorialBar",
symbolSize: [60, 22],
symbolOffset: [0, 10],
z: 12,
label: {
normal: {
show: true,
position: "top",
fontSize: 20,
fontWeight: 'bold',
color: '#909399'
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(89,211,255,1)"
},
{
offset: 1,
color: "rgba(23,237,194,1)"
}
])
}
},
data: line
},

//柱体
{
name: '',
type: 'bar',
barWidth: 60,
barGap: '0%',
itemStyle: {
normal: {
color: {
x: 0, y: 0, x2: 0, y2: 1,
type: "linear",
global: false,
colorStops: [{
offset: 0,
color: "rgba(0,255,245,0.5)"
}, {
offset: 1,
color: "#43bafe"
}]
}
}
},
data: line
},

//柱顶圆片
{
name: "",
type: "pictorialBar",
symbolSize: [60, 22],//调整截面形状
symbolOffset: [0, -10],
z: 12,
symbolPosition: "end",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0,0,0,1, [{
offset: 0,
color: "rgba(89,211,255,1)"
}, {
offset: 1,
color: "rgba(23,237,194,1)"
}],
false
)
}
},
data: line
}
]
};

4 饼状图

option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item'
},
// legend: {
// orient: 'vertical',
// left: 'left',
// },
series: [
{
name: '访问来源',
type: 'pie',
selectedMode: 'single',
selectedOffset: 20,
radius: '50%',
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};

5 玫瑰图

option = {
title: {
text: '666',
left: 'center',
top: '49%',
textStyle: {
fontSize: 16,
color: '#3C4353',
fontStyle: 'normal',
fontWeight: '400',
fontFamily: 'PingFangSC-Regular,PingFang SC;',
}
},
color: ['#7eacea', '#e15777', '#95ea71', '#ea9b4f', '#7577df', '#be72d8', '#fff'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [{
name: '统计',
type: 'pie',
radius: [30, 110],
center: ['50%', '50%'],
roseType: 'radius',
label: {
show: true,
formatter: '{d}%',
},
emphasis: {
label: {
show: true
}
},
data: [{
value: 25,
name: 'rose1'
},
{
value: 20,
name: 'rose2'
},
{
value: 15,
name: 'rose3'
},
{
value: 10,
name: 'rose4'
},
{
value: 8,
name: 'rose5'
},
{
value: 3,
name: 'rose6'
},
]
}, {
name: '占位',
type: 'pie',
silent: true,
center: ['50%', '50%'],
radius: 30,
hoverAnimation: false,
label: {
show: false,
position: 'center'
},
data: [{
value: 1,
name: '占位2'
},

],
itemStyle: {

normal: {
color: '#fff',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
},
}
}, ]
};

6 雷达图

option = {
backgroundColor: 'rgba(0,0,0,.5)',
legend: {
top: '0%',
right: '2%',
orient: 'vertical',
textStyle: { color: '#fff', fontSize: 22, },
data: ['2019评分', '2020评分'],
icon: 'roundRect',
},
radar: {
radius: '60%',
center: ['50%', '52%'],
startAngle: 0,
triggerEvent: true,
name: { textStyle: { color: '#fff', fontSize: '20', borderRadius: 3, padding: [20, 5] } },
nameGap: '2',
indicator: [
{ name: '服务态度', max: 6500 },
{ name: '办事时间', max: 16000 },
{ name: '跑动次数', max: 30000 },
{ name: '缴费方式', max: 38000 },
],
splitArea: {
areaStyle: {
color: [ 'rgba(0,255,255, 0.1)', 'rgba(0,255,255, 0.2)', 'rgba(0,255,255, 0.3)', 'rgba(0,255,255, 0.4)', 'rgba(0,255,255, 0.5)', 'rgba(0,255,255, 0.6)', ].reverse(),
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 30,
shadowOffsetX: 10,
shadowOffsetY: 10
}
},
axisLine: { lineStyle: { color: 'rgba(0,206,209, 0.3)' } },
splitLine: {
lineStyle: {
width: 1,
color: [ 'rgba(0,206,209, 0.1)', 'rgba(0,206,209, 0.2)', 'rgba(0,206,209, 0.3)', 'rgba(0,206,209, 0.4)', 'rgba(0,206,209, 0.5)', 'rgba(0,206,209, 0.6)' ].reverse()
}
}
},
series: [{
name: '2019评分',
type: 'radar',
areaStyle: { color: 'rgba(127,255,210, 0.5)' },
symbol: 'circle',
symbolSize: 12,
itemStyle: { color: 'rgba(127,255,210,0.8)', borderColor: 'rgba(127,255,210,0.2)', borderWidth: 10, },
lineStyle: { color: 'rgba(127,255,210, 0.6)', width: 2 },
label: { show: false, },
data: [ [4600, 13000, 25000, 23500, 25000] ]
},
{
name: '2020评分',
type: 'radar',
areaStyle: { color: 'rgba(255,237,145, 0.5)' },
symbol: 'circle',
symbolSize: 12,
itemStyle: { color: 'rgba(255,237,145,0.8)', borderColor: 'rgba(255,237,145,0.2)', borderWidth: 10, },
lineStyle: { color: 'rgba(255,237,145, 0.6)', width: 2 },
data: [ [5300, 15000, 12800, 13500, 15000] ]
}
]
};

7 知识图谱

let dataRel=[
{
name: '实体',
draggable: false, // 是否可以拖拽，默认false
category: 0, // 这是种类，运维1测试2应用3实施4开发5
number: 0, // 这是编号非必须，目的仅为方便编写line
value: [300, 45], //图形大小
symbolSize: 80,
showNum: 25 //节点需要显示的额外内容
}, {
name: '环境因子',
number: 1,
category: 1,
draggable: true,
value: 40,
showNum: 35
}, {
name: '物质',
number: 2,
category: 1,
draggable: true,
value: 45,
showNum: 35
}, {
name: '生物',
number: 3,
category: 1,
draggable: true,
value: 45,
showNum: 35
}, {
name: '浮游生物',
number: 4,
category: 1,
draggable: false,
value: [300, 100],
symbolSize: 80,
showNum: 35
}, {
name: '浮游植物',
number: 5,
category: 3,
draggable: true,
value: 45,
showNum: 35
}, {
name: '浮游动物',
number: 6,
category: 3,
draggable: true,
value: 45,
showNum: 35
}, {
name: '原生生物',
number: 7,
category: 2,
draggable: true,
value: 45,
showNum: 35
}, {
name: '细菌',
number: 8,
category: 2,
draggable: true,
value: 45,
showNum: 35
}, {
name: '灾害事件',
number: 9,
category: 1,
draggable: true,
value: 45,
showNum: 35
}, {
name: '赤潮',
number: 10,
category: 2,
draggable: true,
value: 45,
showNum: 35
}, {
name: '水母灾害',
number: 11,
category: 2,
draggable: true,
value: 35,
showNum: 35
}]
let dataLink= [
{
source: 0, // 可以用name 可以用number，但name不能重名
target: 1,
value: '一级'
}, {
source: 0, // 可以用name 可以用number，但name不能重名
target: 2,
value: '一级'
}, {
source: 0, // 可以用name 可以用number，但name不能重名
target: 3,
value: '一级'
}, {
source: 0, // 可以用name 可以用number，但name不能重名
target: 9,
value: '一级'
}, {
source: 3, // 可以用name 可以用number，但name不能重名
target: 4,
value: '二级-生物'
}, {
source: 3, // 可以用name 可以用number，但name不能重名
target: 7,
value: '二级-生物'
}, {
source: 3, // 可以用name 可以用number，但name不能重名
target: 8,
value: '二级-生物'
}, {
source: 4, // 可以用name 可以用number，但name不能重名
target: 5,
value: '三级-灾害事件'
}, {
source: 4, // 可以用name 可以用number，但name不能重名
target: 6,
value: '三级-灾害事件'
}, {
source: 9, // 可以用name 可以用number，但name不能重名
target: 10,
value: '二级-灾害事件'
}, {
source: 9, // 可以用name 可以用number，但name不能重名
target: 11,
value: '二级-灾害事件'
}, ]
option = {
title: {
text: '实体关系网络'
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
legend: {
x: "center",
show: true,
data: [] // 此处不显示根节点学生
},
series: [

{
type: 'graph',
layout: 'force',
symbolSize: function(size) {
return size;
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
formatter: "{c}"
}
},
force: {
repulsion: 2500,
edgeLength: [10, 50]
},
focusNodeAdjacency: true,
roam: true,
categories: [{
name: '用户',
}, {
name: '话题',
}, {
name: '测试',
// itemStyle: { 可配置颜色
// normal: {
// color: "blue",
// }
// }
}, {
name: '应用',
}, {
name: '实施',
}, {
name: '开发',
}],
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
}
},
force: {
repulsion: 1000
},
tooltip: {
formatter: function(node) { // 区分连线和节点，节点上额外显示其他数字
if (!node.value) {
return node.data.name;
} else {
return node.data.name + ":" + node.data.showNum;
}
},
},
lineStyle: {
normal: {
opacity: 0.9,
width: 1,
curveness: 0.3
}
},
data: dataRel,
links:dataLink
}
]
};