前言
可视化图表种类如此之多，什么场景下应该用什么图表展示，是一个让人头秃的难题。本篇文章带你从ECharts安装使用到配置各种样式的ECharts图表。
ECharts官网
1. 安装Echarts
原生JS项目中安装ECharts
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>Vue项目安装ECharts
npm install echarts --save2. 使用Echarts创建图表
// 配置图表数据和样式信息
let option = {
//…………
}
// 调用ECharts的init方法
let myChart = echarts.init(
document.getElementById("echartsId")
);
// 通过setOption渲染出图表
myChart.setOption(option);3. 监听窗口尺寸变化调整ECharts图表大小，实现ECharts尺寸自适应
// 为窗口加上宽度变化事件，当宽高发生改变时，调用echarts的resize()方法，调整图表尺寸
window.addEventListener('resize', function () {
myChart.resize();
})4. 炫酷Echarts代码示例
这里给大家介绍4个我常用的ECharts素材网站，找到option中的样式直接copy代码即可。
PPChart - 让图表更简单让图表更简单。PPChart 提供 Echarts 收录、图表制作等服务
https://ppchart.com/#/
chart.top - 让图表更简单-echarts图集demo让图表更简单。chart.top 提供 Echarts 收录、图表制作等服务http://chart.365api.cn/#/
4.1 柱状图
4.1.1 柱状图-1
代码：
let xLabel = [
"市区",
"市南",
"市北",
"万州",
"城口",
"秀山",
"川东",
"綦南",
"武隆",
];
option = {
tooltip: {},
backgroundColor: "#0f375f",
animation: false,
grid: {
top: "25%",
bottom: "10%", //也可设置left和right设置距离来控制图表的大小
},
xAxis: {
data: xLabel,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#11417a",
},
},
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel: {
show: true,
margin: 14,
fontSize: 14,
textStyle: {
color: "#A3C0DF", //X轴文字颜色
},
},
},
yAxis: [
{
type: "value",
gridIndex: 0,
min: 0,
max: 100,
interval: 25,
// splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: "#113763",
width: 1,
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#11417a",
},
},
axisLabel: {
show: true,
margin: 14,
fontSize: 14,
textStyle: {
color: "#A3C0DF", //X轴文字颜色
},
},
},
],
series: [
{
// 值
name: "采集覆盖率情况",
type: "bar",
barWidth: 30,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(249,255,59,1)",
},
{
offset: 1,
color: "rgba(15,38,35,0.2)",
},
]),
},
},
data: [88.6, 88.9, 89, 88.8, 88.8, 20, 20, 20, 20],
z: 10,
zlevel: 2,
label: {
show: true,
position: "top",
distance: 10,
fontSize: 16,
fontFamily: "DIN",
color: "#ffffff",
zlevel: 4,
z: 10,
formatter: "{c}%",
},
},
{
// 值分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#0F375F",
},
},
symbolRepeat: "fixed",
symbolMargin: 3,
symbol: "rect",
symbolClip: true,
symbolSize: [30, 3],
symbolPosition: "start",
symbolOffset: [0, -1],
// symbolBoundingData: this.total,
data: [88.6, 88.9, 89, 88.8, 88.8, 20, 20, 20, 20],
width: 25,
z: 0,
zlevel: 3,
},
{
//辅助背景图形
name: "背景条",
type: "bar", //pictorialBar
barWidth: "30",
barGap: "-100%",
itemStyle: {
normal: {
borderWidth: 0,
color: "rgba(146,158,48,0.2)",
},
barBorderRadius: 10,
},
data: [100, 100, 100, 100, 100, 100, 100, 100, 100],
z: 0,
zlevel: 0,
},
{
// 背景分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#0F375F",
},
},
symbolRepeat: "fixed",
symbolMargin: 3,
symbol: "rect",
symbolClip: true,
symbolSize: [30, 3],
symbolPosition: "start",
symbolOffset: [0, -1],
// symbolBoundingData: this.total,
data: [100, 100, 100, 100, 100, 100, 100, 100, 100],
width: 25,
z: 0,
zlevel: 1,
},
],
};
4.1.2 柱状图-2
代码
const img = "/asset/get/s/data-1599036857057-CXTCW0JiG.png";
option = {
backgroundColor: "#040c28",
color: ["#081542"],
tooltip: {
trigger: "item",
},
grid: {
left: "3%", //整个曲线居左的距离
right: "4%", //整个曲线居右左的距离
bottom: "10%", //整个曲线居下左的距离
height: "70%", //整个曲线的高
containLabel: true,
},
xAxis: [
{
type: "category",
axisTick: {
show: false,
color: "#707070",
},
axisLabel: {
textStyle: {
fontSize: 14,
color: "#597faa",
},
},
axisLine: {
show: false,
lineStyle: {
color: "#00FF00",
},
},
data: ["2016.8", "2017.8", "2018.8", "2019.8", "2020.8"],
},
],
yAxis: [
{
type: "value",
name: "",
nameTextStyle: {
fontSize: 14, //文字大小
color: "#ebf8ac", //文字颜色
},
axisLine: {
// 坐标轴轴线相关设置
show: false,
},
axisTick: {
// 坐标轴刻度
show: false,
},
axisLabel: {
show: true,
// formatter: "{value} %", //左侧单位添加后缀
textStyle: {
color: "#597faa", //Y轴的数据字体颜色
},
},
splitLine: {
show: true, //网格线显示
lineStyle: {
type: "dashed",
color: "rgba(255,255,255,.2)",
},
},
},
],
series: [
{
name: "",
type: "bar",
barWidth: "50", //柱状图宽度
data: [12, 32, 12, 32, 32],
barCategoryGap: "60%",
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(12, 24, 67, 0.1)",
},
{
offset: 0.5,
color: "rgba(12, 24, 67, 0.5)",
},
{
offset: 1,
color: "#051342",
},
]),
},
},
label: {
normal: {
show: true,
position: ["50%", "0%"],
textStyle: {
color: "#fff",
fontSize: 16,
align: "center",
},
formatter: (val) => {
return [val.data, "{img|}"].join("\n");
},
rich: {
img: {
backgroundColor: {
image: img,
},
height: 40,
},
},
},
},
},
],
};
4.1.3 柱状图-3
代码：
// 计划产值
var zzx1 = [27, 38, 41, 21, 27];
var zx = zzx1.map((item) => {
return 100 - item;
});
// 实际产值
var wgx1 = [37, 40, 63, 61, 64];
var wg = wgx1.map((item) => {
return 100 - item;
});
var barWidth = 40;
option = {
backgroundColor: "#010243",
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(e) {
// console.log(e);
var str =
e[6].axisValue +
"<br>" +
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
e[6].color.colorStops[0].color +
";'></span>" +
"" +
e[6].seriesName +
" : " +
e[6].value +
"%<br>" +
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
e[8].color.colorStops[0].color +
";'></span>" +
"" +
e[8].seriesName +
" : " +
e[8].value +
"%";
return str;
},
},
grid: {
left: "2%",
right: "4%",
bottom: "4%",
top: "16%",
containLabel: true,
},
legend: {
data: ["计划产值", "实际产值"],
top: 1,
textStyle: {
color: "#00ffff",
fontSize: 14,
},
itemWidth: 12,
itemHeight: 10,
itemGap: 35,
color: "#242424",
selectedMode: false,
},
xAxis: {
type: "category",
data: [
"A高速公路建设项目质量合格率",
"B高速公路建设项目质量合格率",
"C高速公路建设项目质量合格率",
"D高速公路建设项目质量合格率",
"E高速公路建设项目质量合格率",
],
axisLine: {
show: true,
lineStyle: {
color: "#15205B",
},
},
axisTick: {
show: false,
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: "Microsoft YaHei",
color: "#fff", // x轴颜色
fontWeight: "normal",
fontSize: "14",
lineHeight: 22,
},
interval: 0, //标签设置为全部显示
margin: 15,
lineHeight: 15,
// fontSize: 11,
formatter: function(params) {
var a = params.substring(0, params.length - 5);
// console.log(params.substring(0, params.length - 3));
var newParamsName = a + "\n质量合格率";
//将最终的字符串返回
return newParamsName;
},
},
},
yAxis: {
min: 0,
max: 100,
type: "value",
axisLine: {
show: true,
lineStyle: {
color: "#15205B",
},
},
splitLine: {
show: false,
lineStyle: {
color: "rgba(135,140,147,1)", //左侧显示线
},
},
axisTick: {
show: false,
},
axisLabel: {
formatter: "{value}%",
textStyle: {
color: "#c9c9c9",
fontSize: 14,
},
},
},
series: [
// 计划产值中间正方形
{
type: "pictorialBar",
symbol: "diamond",
symbolSize: [barWidth, 8],
symbolOffset: [-26, -4],
symbolPosition: "end",
z: 12,
color: "#3185FF",
data: zzx1,
},
// 实际产值中间正方形
{
type: "pictorialBar",
symbol: "diamond",
symbolSize: [barWidth, 8],
symbolOffset: [26, -4],
symbolPosition: "end",
z: 12,
color: "#1BCC98",
data: wgx1,
},
// 计划产值底部正方形
{
type: "pictorialBar",
symbol: "diamond",
symbolSize: [barWidth, 8],
symbolOffset: [-26, 4],
z: 12,
color: "#161D6E",
data: zzx1,
},
// 实际产值底部正方形
{
name: "",
type: "pictorialBar",
symbol: "diamond",
symbolSize: [barWidth, 8],
symbolOffset: [26, 4],
color: "#151D6E",
z: 12,
data: wgx1,
},
// 计划产值上部正方形
{
data: [100, 100, 100, 100, 100],
type: "pictorialBar",
symbol: "diamond",
symbolSize: [barWidth, 8],
symbolOffset: [-26, -4],
color: "#283190",
symbolPosition: "end",
},
// 实际产值上部正方形
{
data: [100, 100, 100, 100, 100],
type: "pictorialBar",
symbol: "diamond",
symbolSize: [barWidth, 8],
symbolOffset: [26, -4],
color: "#283190",
symbolPosition: "end",
},
// 计划产值进度柱子
{
name: "计划产值",
type: "bar",
barWidth: barWidth,
// zlevel: 2,
stack: "1",
itemStyle: {
normal: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#2863D2",
},
{
offset: 1,
color: "#161D6E",
},
]),
barBorderRadius: 0,
},
},
label: {
show: true,
position: ["-18", "-18"],
color: "#00f8ff",
fontSize: 12,
},
data: zzx1,
},
// 计划产值底部柱子
{
data: zx,
type: "bar",
barWidth: barWidth,
stack: "1",
zlevel: -1,
itemStyle: {
normal: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#182075",
},
{
offset: 1,
color: "#182075",
},
]),
barBorderRadius: 0,
},
},
},
// 实际产值进度柱子
{
name: "实际产值",
type: "bar",
stack: "2",
barWidth: barWidth,
itemStyle: {
normal: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#19958B",
},
{
offset: 1,
color: "#151B6F",
},
]),
barBorderRadius: 0,
},
},
label: {
show: true,
position: ["18", "-18"],
color: "#00f8ff",
fontSize: 12,
},
data: wgx1,
},
// 实际产值底部柱子
{
data: wg,
type: "bar",
barWidth: barWidth,
stack: "2",
zlevel: -1,
itemStyle: {
normal: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#182075",
},
{
offset: 1,
color: "#182075",
},
]),
barBorderRadius: 0,
},
},
},
],
};4.1.4 柱状图-4
代码：
var xdata = ['苏州市', '无锡市', '南京市'];
var data = [70, 60, 80];
var maxArr = [100, 100, 100];
option = {
backgroundColor: "rgba(5,39,58,1)", //背景色
tooltip: {
trigger: "axis",
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
// borderRadius: 5,
// borderColor: "#6baab2",
// borderWidth: 1,
formatter: function(params) { // params[0].data.nameCode
let dot = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
return (
params[0].name +
"<br>" +
"杆塔数量 ：" +
params[0].value
);
}
},
grid: {
left: "4%",
right: "4%",
bottom: "3%",
top: "15%",
containLabel: true
},
xAxis: {
data: xdata,
triggerEvent: true,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
rotate: 0,
interval: 0,
textStyle: {
padding: [14,0,0,0],
fontSize: 14,
color: "rgba(255,255,255,1)"
}
}
},
yAxis: {
name: "单位：个数",
triggerEvent: true,
nameTextStyle: {
color: "rgba(255,255,255,1)",
fontSize: 16,
padding: [0,0,10,-20]
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
show: true,
textStyle: {
color: "rgb(148,159,167)",
fontSize: 16
}
}
},
// color: ["#e54035"],
series: [{
name: "数量",
barMinHeight: 10,
type: "pictorialBar",
barCategoryGap: "60%",
// symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
itemStyle: {
normal: {
//barBorderRadius: 5,
//渐变色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#01EAED"
},
{
offset: 0.5,
color: "#02C4DD"
},
{
offset: 1,
color: "#029ED9"
}
])
}
},
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#fff",
fontSize:20
}
}
},
data: data,
z: 10
},
{
name: "hill",
type: "bar",
barWidth: '20%',
symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
itemStyle: {
normal: {
color: "rgba(11,47,68,.8)"
}
},
data: maxArr,
z: 9
}
]
}4.2 折线图
4.2.1 折线图-1
代码：
option = {
backgroundColor: '#0E204A',
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(255,255,255,0)' // 0% 处的颜色
}, {
offset: 0.5,
color: 'rgba(255,255,255,1)' // 100% 处的颜色
}, {
offset: 1,
color: 'rgba(255,255,255,0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
},
},
grid: {
top: '18%',
left: '1%',
right: '1%',
bottom: '25%',
// containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: true,
axisLine: { //坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.4)'
},
},
axisLabel: { //坐标轴刻度标签的相关设置
textStyle: {
color: '#d1e6eb',
margin: 15,
},
},
axisTick: {
show: false,
},
data: ['2014', '2015', '2016', '2017', '2018', '2019'],
}],
yAxis: [{
type: 'value',
min: 0,
// max: 140,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
margin: 20,
textStyle: {
color: '#d1e6eb',
},
},
axisTick: {
show: false,
},
}],
series: [{
name: '注册总量',
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbolSize: 8,
lineStyle: {
normal: {
color: "#53fdfe", // 线条颜色
},
borderColor: '#f0f'
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
}
},
itemStyle: {
normal: {
color: "rgba(255,255,255,1)",
}
},
tooltip: {
show: false
},
areaStyle: { //区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,150,239,0.3)'
},
{
offset: 1,
color: 'rgba(0,253,252,0)'
}
], false),
shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}
},
data: [150, 200, 259, 360, 378, 450, 450]
}]
};4.2.2 折线图-2
代码：
option = {
backgroundColor: '#080b30',
title: {
text: '多线图',
textStyle: {
align: 'center',
color: '#fff',
fontSize: 20,
},
top: '5%',
left: 'center',
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 255, 233,0)'
}, {
offset: 0.5,
color: 'rgba(255, 255, 255,1)',
}, {
offset: 1,
color: 'rgba(0, 255, 233,0)'
}],
global: false
}
},
},
},
grid: {
top: '15%',
left: '5%',
right: '5%',
bottom: '15%',
// containLabel: true
},
xAxis: [{
type: 'category',
axisLine: {
show: true
},
splitArea: {
// show: true,
color: '#f00',
lineStyle: {
color: '#f00'
},
},
axisLabel: {
color: '#fff'
},
splitLine: {
show: false
},
boundaryGap: false,
data: ['A', 'B', 'C', 'D', 'E', 'F'],
}],
yAxis: [{
type: 'value',
min: 0,
// max: 140,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
margin: 20,
textStyle: {
color: '#d1e6eb',
},
},
axisTick: {
show: false,
},
}],
series: [{
name: '注册总量',
type: 'line',
smooth: true, //是否平滑
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: 'circle',
symbolSize: 15,
lineStyle: {
normal: {
color: "#00b3f4",
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 5,
shadowOffsetX: 5,
},
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#00b3f4',
}
},
itemStyle: {
color: "#00b3f4",
borderColor: "#fff",
borderWidth: 3,
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
tooltip: {
show: false
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,179,244,0.3)'
},
{
offset: 1,
color: 'rgba(0,179,244,0)'
}
], false),
shadowColor: 'rgba(0,179,244, 0.9)',
shadowBlur: 20
}
},
data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
},
{
name: '注册总量',
type: 'line',
smooth: true, //是否平滑
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: 'circle',
symbolSize: 15,
lineStyle: {
normal: {
color: "#00ca95",
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 5,
shadowOffsetX: 5,
},
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#00ca95',
}
},
itemStyle: {
color: "#00ca95",
borderColor: "#fff",
borderWidth: 3,
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
tooltip: {
show: false
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,202,149,0.3)'
},
{
offset: 1,
color: 'rgba(0,202,149,0)'
}
], false),
shadowColor: 'rgba(0,202,149, 0.9)',
shadowBlur: 20
}
},
data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, ],
},
]
};4.2.3 折线图-3
代码：
option = {
backgroundColor: "#05224d",
tooltip: {},
grid: {
top: '8%',
left: '1%',
right: '1%',
bottom: '8%',
containLabel: true,
},
legend: {
itemGap: 50,
data: ['注册总量' ,'最新注册量'],
textStyle: {
color: '#f9f9f9',
borderColor: '#fff'
},
},
xAxis: [{
type: 'category',
boundaryGap: true,
axisLine: { //坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: '#f9f9f9'
},
},
axisLabel: { //坐标轴刻度标签的相关设置
textStyle: {
color: '#d1e6eb',
margin: 15,
},
},
axisTick: {
show: false,
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', ],
}],
yAxis: [{
type: 'value',
min: 0,
// max: 140,
splitNumber: 7,
splitLine: {
show: true,
lineStyle: {
color: '#0a3256'
}
},
axisLine: {
show: false,
},
axisLabel: {
margin: 20,
textStyle: {
color: '#d1e6eb',
},
},
axisTick: {
show: false,
},
}],
series: [{
name: '注册总量',
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: "#28ffb3", // 线条颜色
},
borderColor: '#f0f'
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
}
},
itemStyle: {
normal: {
color: "#28ffb3",
}
},
tooltip: {
show: false
},
areaStyle: { //区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,154,120,1)'
},
{
offset: 1,
color: 'rgba(0,0,0, 0)'
}
], false),
shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}
},
data: [393, 438, 485, 631, 689, 824, 987]
}, {
name: '最新注册量',
type: 'bar',
barWidth: 20,
tooltip: {
show: false
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
}
},
itemStyle: {
normal: {
// barBorderRadius: 5,
// color: new echarts.graphic.LinearGradient(
// 0, 0, 0, 1,
// [{
// offset: 0,
// color: '#14c8d4'
// },
// {
// offset: 1,
// color: '#43eec6'
// }
// ]
// )
color: function(params) {
var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
return colorList[params.dataIndex];
}
}
},
data: [200, 382, 102, 267, 186, 315, 316]
}]
};4.3 饼图
4.3.1 饼图-1
代码：
var img =
"data:image/png;base64,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";
var trafficWay = [
{
name: "火车",
value: 20,
},
{
name: "飞机",
value: 10,
},
{
name: "客车",
value: 30,
},
{
name: "轮渡",
value: 40,
},
];
var data = [];
var color = [
"#00ffff",
"#00cfff",
"#006ced",
"#ffe000",
"#ffa800",
"#ff5b00",
"#ff3000",
];
for (var i = 0; i < trafficWay.length; i++) {
data.push(
{
value: trafficWay[i].value,
name: trafficWay[i].name,
itemStyle: {
normal: {
borderWidth: 5,
shadowBlur: 20,
borderColor: color[i],
shadowColor: color[i],
},
},
},
{
value: 2,
name: "",
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: "rgba(0, 0, 0, 0)",
borderColor: "rgba(0, 0, 0, 0)",
borderWidth: 0,
},
},
}
);
}
var seriesOption = [
{
name: "",
type: "pie",
clockWise: false,
radius: [105, 109],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: true,
position: "outside",
color: "#ddd",
formatter: function (params) {
var percent = 0;
var total = 0;
for (var i = 0; i < trafficWay.length; i++) {
total += trafficWay[i].value;
}
percent = ((params.value / total) * 100).toFixed(0);
if (params.name !== "") {
return (
"交通方式：" +
params.name +
"\n" +
"\n" +
"占百分比：" +
percent +
"%"
);
} else {
return "";
}
},
},
labelLine: {
length: 30,
length2: 100,
show: true,
color: "#00ffff",
},
},
},
data: data,
},
];
option = {
backgroundColor: "#0A2E5D",
color: color,
title: {
text: "交通方式",
top: "48%",
textAlign: "center",
left: "49%",
textStyle: {
color: "#fff",
fontSize: 22,
fontWeight: "400",
},
},
graphic: {
elements: [
{
type: "image",
z: 3,
style: {
image: img,
width: 178,
height: 178,
},
left: "center",
top: "center",
position: [100, 100],
},
],
},
tooltip: {
show: false,
},
legend: {
icon: "circle",
orient: "horizontal",
// x: 'left',
data: ["火车", "飞机", "客车", "轮渡"],
right: 340,
bottom: 150,
align: "right",
textStyle: {
color: "#fff",
},
itemGap: 20,
},
toolbox: {
show: false,
},
series: seriesOption,
};
4.3.2 饼图-2
代码：
let angle = 0;//角度，用来做简单的动画效果的
let value = 55.33;
option = {
backgroundColor:"#061740",
title: {
text: '{a|'+ value +'}{c|%}',
x: 'center',
y: 'center',
textStyle: {
rich:{
a: {
fontSize: 48,
color: '#29EEF3'
},
c: {
fontSize: 20,
color: '#ffffff',
// padding: [5,0]
}
}
}
},
legend: {
type: "plain",
orient: "vertical",
right: 0,
top: "10%",
align: "auto",
data: [{
name: '涨价后没吃过',
icon: "circle"
}, {
name: '天天吃',
icon: "circle"
}, {
name: '三五天吃一次',
icon: "circle"
}, {
name: '半个月吃一次',
icon: "circle"
}],
textStyle: {
color: "white",
fontSize: 16,
padding: [10, 1, 10, 0]
},
selectedMode:false
},
series: [ {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
startAngle: (0+angle) * Math.PI / 180,
endAngle: (90+angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
startAngle: (180+angle) * Math.PI / 180,
endAngle: (270+angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
startAngle: (270+-angle) * Math.PI / 180,
endAngle: (40+-angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
startAngle: (90+-angle) * Math.PI / 180,
endAngle: (220+-angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
let point = getCirlPoint(x0, y0, r, (90+-angle))
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4
},
style: {
stroke: "#0CD3DB",//粉
fill: "#0CD3DB"
},
silent: true
};
},
data: [0]
}, {
name: "ring5", //绿点
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
let point = getCirlPoint(x0, y0, r, (270+-angle))
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4
},
style: {
stroke: "#0CD3DB", //绿
fill: "#0CD3DB"
},
silent: true
};
},
data: [0]
}, {
name: '吃猪肉频率',
type: 'pie',
radius: ['58%', '45%'],
silent: true,
clockwise: true,
startAngle: 90,
z: 0,
zlevel: 0,
label: {
normal: {
position: "center",
}
},
data: [{
value: value,
name: "",
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#4FADFD' // 0% 处的颜色
}, {
offset: 1,
color: '#28E8FA' // 100% 处的颜色
}]
},
}
}
},
{
value: 100-value,
name: "",
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: "#173164"
}
}
}
]
},
{
name: "",
type: "gauge",
radius: "58%",
center: ['50%', '50%'],
startAngle: 0,
endAngle: 359.9,
splitNumber: 8,
hoverAnimation: true,
axisTick: {
show: false
},
splitLine: {
length: 60,
lineStyle: {
width: 5,
color: "#061740"
}
},
axisLabel: {
show: false
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
opacity: 0
}
},
detail: {
show: false
},
data: [{
value: 0,
name: ""
}]
},
]
};
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
return {
x: x1,
y: y1
}
}
function draw(){
angle = angle+3
myChart.setOption(option, true)
//window.requestAnimationFrame(draw);
}
setInterval(function() {
//用setInterval做动画感觉有问题
draw()
}, 100);
7922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
