近期学习到了关于echarts.js图标的深入一点的使用方法，特此和大家进行分享，有任何不足和疑问，请留言，一起学习，共同进步。
先上效果图
异色柱子，顶部数字和中间比率
首先第一步
先引入要使用的插件 https://www.bootcdn.cn/echarts/ 点击进行下载 下载到本地，使用方便快捷
然后上代码
各种注解都已涵盖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<script src="/static/js/echarts.min.js"></script>
<title>echarts.js的简单使用</title>
<style>
#main {
background-image: url("https://img2.imgtp.com/2024/04/11/2BA0BknF.jpg");
background-repeat: no-repeat;
background-size: cover;
padding-top: 3vh;
margin-top: 2vh;
border-radius: 14px;
width: 800px;
height: 58vh;
overflow: visible;
visibility: visible;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
<script>
//初始化实例对象 echarts.init(dom容器)
var myChart = echarts.init(document.getElementById('main'));
//注：bottomOptions 与 valueArr数组长度一致（不然数据会缺失）
var bottomOptions = ["漂亮", "不漂亮", "弃权",];//底部选项
var valueArr = [60, 30, 10];//各选项的值
var valueRatio = [];//各选项的百分比值
var sleepTimeChart;//条状数据顶部的和柱中间的值
//计算比率方法
function calculateRatio($data) {
let sum = 0
$data.forEach(item => {
sum += item;
});
if (sum !== 0) {
var linshi = [...$data];
linshi.forEach((item, index, arr) => {
linshi[index] = ((linshi[index] / sum) * 100).toFixed(2);
});
valueRatio = linshi
} else {
valueRatio = $data
}
return true
}
// 统计图渲染
tjt()
function tjt() {
calculateRatio(valueArr)
sleepTimeChart = {
// 顶部数值
afterAsleepArr: valueArr,
// 柱中百分比数值
afterAsleepPercent: valueRatio
}
myChart.setOption({
title: {
text: '漂亮吗？'
},
barWidth: 134,//条状的宽度
tooltip: { //鼠标移入条状的设置
trigger: 'axis',//显示具体数据
axisPointer: {
type: 'none'//柱子中间直线
},
formatter: function (params) { // 取消信息前的 圆点
return params[0].name + ': ' + params[0].value;
}
},
legend: {
data: ['票数'],
textStyle: { // 图例文字样式
color: '#333', // 文字颜色
fontSize: 14 // 字体大小
},
itemWidth: 20, // 图例项宽度
itemHeight: 10, // 图例项高度
padding: [5, 10], // 内边距
itemGap: 20, // 图例项间隔
orient: 'vertical', // 布局朝向为垂直
left: 'left', // 图例组件离容器左侧的距离
top: '10%' // 图例组件离容器顶部 10% 的距离
},
grid: { //直角坐标系内绘图网格
bottom: "10" //值越大X轴下方的高度越大
, left: "0" //值越大统计图越靠右
, top: "80" //条状距离顶部的高度（因在顶部显示结果，距离留大一些）
, right: "0", //值越大统计图越靠右
containLabel: true// 是否将刻度标签包含在柱子区域中
},
xAxis: { //关于X轴的设置
type: 'category',//X 轴的类型
data: bottomOptions, // X轴的数据
axisLabel: {
show: true, //这里的show用于设置是否显示x轴下的字体 默认为true
interval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
textStyle: { //textStyle里面写x轴下的字体的样式
color: '#000',
fontSize: 38,
lineHeight: 18,
fontWeight: 600,
},
overflow: "breakAll",
margin: 34,
letterSpacing: 2,
},
axisLine: {
show: false, // 这里的show用于设置是否显示x轴那一条线 默认为true
},
axisTick: {
show: false // 是否显示坐标轴刻度线 默认为true
},
},
yAxis: { //关于X轴的设置
axisLabel: {
show: true, //这里的show用于设置是否显示y轴下的字体 默认为true
textStyle: { //textStyle里面写y轴下的字体的样式
color: '#000',
fontSize: 0,
},
margin: 14,
},
//用于设置y轴的那一条线
axisLine: {
show: false, //这里的show用于设置是否显示y轴那一条线 默认为true
},
splitLine: {
show: false, // 背景横线的状态 默认为true
}
},
series: [
// 底部的椭圆形(象形柱图):pictorialBar
{
name: '票数',
type: "pictorialBar", // pictorialBar(象形柱图)
label: { // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
show: true, //是否显示标签
// position: '', // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
color: '#000',
fontSize: 26,
fontWeight: "bold",
formatter: (a) => {
return sleepTimeChart.afterAsleepPercent[a.dataIndex] + '%'
},
},
symbolSize: [134, 20], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
symbolOffset: [0, 10], // 图形相对于原本位置的偏移
z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
//立体圆柱的设置分三部分 底部椭圆 中间的长方形 顶部椭圆
itemStyle: { //柱子顶部的设置
color: function (params) {
// 设置不同的样式
switch (params.name) {
case "漂亮":
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 这里 offset: 0 1 ,表示从下往上的渐变色
{
offset: 0, // 0%处的颜色
color: "#FFB71F"
},
{
offset: 1, // 100%处的颜色
color: "#FFEDA4"
}
])
case "不漂亮":
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 这里 offset: 0 1 ,表示从下往上的渐变色
{
offset: 0, // 0%处的颜色
color: "#A7C4FF"
},
{
offset: 1, // 100%处的颜色
color: "#FFFFFF"
}
])
case "弃权":
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 这里 offset: 0 1 ,表示从下往上的渐变色
{
offset: 0, // 0%处的颜色
color: "#AAAAAA"
},
{
offset: 1, // 100%处的颜色
color: "#B4BDCD"
}
])
default:
// console.log('出错了');
break
}
}
},
markPoint: { //柱子顶部的设置
symbolSize: 0,// 柱子上方的 气球标
data: [{coord: [0, sleepTimeChart.afterAsleepArr[0]]}, {coord: [1, sleepTimeChart.afterAsleepArr[1]]}, {coord: [2, sleepTimeChart.afterAsleepArr[2]]}],// 柱子顶部的值
label: { // 具体样式
show: true,
fontSize: 46,
padding: [12, 0],
fontWeight: "bold",
color: '#000',
position: 'top',
formatter: (a) => {
return sleepTimeChart.afterAsleepArr[a.dataIndex]
},
}
},
data: sleepTimeChart.afterAsleepArr
},
// 中间的长方形柱状图(柱状图):bar
{
type: 'bar', // 柱状图
barGap: '0',//柱图间距
itemStyle: { // 图形样式
color: function (params) {
switch (params.name) {
case "漂亮":
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 这里 offset: 0 1 ,表示从下往上的渐变色
{
offset: 0, // 0%处的颜色
color: "#FFB71F"
},
{
offset: 1, // 100%处的颜色
color: "#FFEDA4"
}
])
case "不漂亮":
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 这里 offset: 0 1 ,表示从下往上的渐变色
{
offset: 0, // 0%处的颜色
color: "#A7C4FF"
},
{
offset: 1, // 100%处的颜色
color: "#FFFFFF"
}
])
case "弃权":
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 这里 offset: 0 1 ,表示从下往上的渐变色
{
offset: 0, // 0%处的颜色
color: "#AAAAAA"
},
{
offset: 1, // 100%处的颜色
color: "#B4BDCD"
}
])
default:
// console.log('出错了');
break
}
}
},
data: sleepTimeChart.afterAsleepArr
},
// 顶部的椭圆形(象形柱图):pictorialBar
{
type: "pictorialBar",
symbolSize: [134, 20],
symbolOffset: [0, -10],
z: 12,
symbolPosition: "end",
itemStyle: {
color: function (params) {
switch (params.name) {
case "漂亮":
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 这里 offset: 0 1 ,表示从下往上的渐变色
{
offset: 0, // 0%处的颜色
color: "#FFB71F"
},
{
offset: 1, // 100%处的颜色
color: "#FFEDA4"
}
])
case "不漂亮":
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 这里 offset: 0 1 ,表示从下往上的渐变色
{
offset: 0, // 0%处的颜色
color: "#A7C4FF"
},
{
offset: 1, // 100%处的颜色
color: "#FFFFFF"
}
])
case "弃权":
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 这里 offset: 0 1 ,表示从下往上的渐变色
{
offset: 0, // 0%处的颜色
color: "#AAAAAA"
},
{
offset: 1, // 100%处的颜色
color: "#B4BDCD"
}
])
default:
// console.log('出错了');
break
}
}
},
data: sleepTimeChart.afterAsleepArr
}
]
});
}
</script>
</html>如有不足，欢迎指出。
