echarts 数据可视化大屏（包含环形进度图、折线图、胶囊柱状图）
echarts 环形进度图
(可以直接复制代码到echarts修改配置项 ！！！)
let piedata = 25;
option = {
series: [
{
type: "pie",
radius: ["72", "80"], //环形图的内外半径（大小）
center: ["50%", "50%"], //整个图形的位置
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
labelLine: {
show: false,
},
data: [
{
value:piedata, //数据 按比例显示的
selected: false,
itemStyle: {
color: "#fc5328", //图形颜色#fc5328
borderWidth: 2,
borderRadius: 25,
},
label: {
// 是显示标签
show: true,
position: "center",
fontSize: 28,
// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
formatter: "{d}%",
},
},
{
value: 100-piedata, //数据 按比例显示的
name: "",
itemStyle: {
color: "#fae6e1",
},
label: {
show: false,
},
},
],
},
],
}
echarts折线图
(可以直接复制代码到echarts修改配置项 ！！！)
let lineOneData= {
date: ["2022-1-1", "2022-1-2", "2022-1-3", "2022-1-4", "2022-1-5"],
arr: [40233, 54243, 45466, 65446, 72000],
lineColor: "#4288fc",
bgColorOne: "rgba(66, 136, 252,0.8)",
bgColorTwo: "rgba(169, 199, 250,0.1)",
};
option = {
tooltip: {
trigger: "axis",
},
grid: {
//整个图的左右上下间距
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
//y轴只显示四个值
boundaryGap: false, //折线居中改为最左到最右
// data: ["2022-1-1", "2022-1-2", "2022-1-3", "2022-1-4", "2022-1-5"], //数据(数组)
data:lineOneData.date, //数据(数组)
axisLine: {
show: false, //是否显示x轴
onZero: true,
},
axisTick: {
show: false, //是否显示刻度线
},
axisLabel: {
// fontWeight: 700, //文字样式
interval: 50, // 只显示最大和最小坐标(比数组个数大)
showMinLabel: true, // 显示最小刻度标签
showMaxLabel: true, // 显示最大刻度标签
// 单独设置标签样式formatter
formatter: function (value, index) {
let valueone = "";
let valuetwo = "";
if (index == 0) {
// 横坐标第一个日期
valueone = value;
return `{a|${valueone}}`;
} else {
valuetwo = value;
return `{b|${valuetwo}}`;
}
},
rich: {
a: {
padding: [0, 0, 0, 50], //将第一个日期位置对其横坐标开头
},
b: {
padding: [0, 70, 0, 0],
},
},
},
},
yAxis: {
type: "value",
splitNumber: 4, //y轴只显示四个值
axisLabel: {
formatter: "{value}", //鼠标移入的提示信息框
},
axisLine: {
onZero: true,
lineStyle: {
},
},
},
series: [
{
name: "用户数",
type: "line",
// data:[40233, 54243, 45466, 65446, 72000], //数据(数组)
data:lineOneData.arr, //数据(数组)
lineStyle: {
// color: "#4288fc", //折线的颜色
color: lineOneData.lineColor, //折线的颜色
},
symbol: "none", //不显示折点
areaStyle: {
//渐变颜色 （这里后面我改了this.$echarts）
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
// color:"rgba(66, 136, 252,0.8)",
color:lineOneData.bgColorOne,
},
{
offset: 1,
// color:"rgba(66, 136, 252,0.1)",
color:lineOneData.bgColorTwo,
},
]),
},
},
],
}
echarts 带阴影的胶囊柱状图
(可以直接复制代码到echarts修改配置项 ！！！)
let bardata = {
name:['北京','杭州','上海','广州'],
data:[23433,54544,64557,75458]
}
option = {
// 柱状图的颜色
color: ["#ffdb5c", "#9fe6b8", "#67e0e3", "#32c5e9", "#37a2da"],
tooltip: {
show: false,
},
grid: {
left: "20%",
right: "20%",
bottom: "15%",
top: "15%",
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
show: true,//是否显示label x轴标签数值
},
yAxis: {
axisLine: {
// 坐标轴 轴线
show: false, // 是否显示
},
axisTick: {
//是否显示坐标断线
show: false,
},
show:true, //是否显示label y轴标签文字
axisLabel: {
color: "#000", //显示文字
fontSize: 14, //数据文字大小
fontWeight: 500,
},
type: "category",
data: bardata.name,
},
series: [
{
type: "bar",
data: bardata.data,
colorBy: "data", //按数据变色
barWidth: "28%", //图形宽度
showBackground: true,
backgroundStyle: {
shadowColor: "#333", //阴影颜色
shadowBlur: 3,
borderColor: "#ccc", //背景边框颜色
color: "#fff", //背景颜色
// opacity: 0.1,
borderType: "solid",
borderWidth: 1,
borderRadius: [20, 20, 20, 20],
},
barCategoryGap: "40%", // 柱形的间距
itemStyle: {
// 图形的形状
borderRadius: [20, 20, 20, 20],
},
label: {
show: true,
position: "outside", //数据显示位置，默认显示在中间
color: "#000", //数据文字颜色
fontSize: 14, //数据文字大小
fontWeight: 500,
formatter: function (p) {
let value = "";
if (p.value > 0) {
value = p.value;
if (value > 999) {
// 数值加千分号
let parts = value.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
value = parts.join(".");
}
}
return value;
},
},
},
],
}
echarts 带提示框的饼状图
显示 tooltip，选中图例，鼠标移入显示提示框。
option = {
title: {
text: '饼图程序调用高亮示例',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
let currentIndex = -1;
setInterval(function() {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, 1000);
配置项
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} ({d}%)'
},
a表示 series 里面item.name ，b表示data.name ，c表示data.value ，d表示图形占比