柱状排行图
-
效果图
echarts实现纵向排行图(配置)
<template>
//设置容器大小
<div ref="myChart" style="width: 100%; height: 100%" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "",
data() {
return {
xdata: [
"动漫1",
"动漫2",
"动漫3",
"动漫4",
"动漫5",
"动漫6",
"动漫7",
"动漫8",
"动漫9",
"动漫10",
],
ydata: [200, 190, 180, 170, 160, 150, 140, 130, 120, 110],
};
},
props: {
addData: {
type: Array,
default: () => [],
},
},
created() {},
computed: {},
mounted() {
this.setMyEchart(this.xdata, this.ydata);
},
methods: {
setMyEchart(xdata, ydata) {
const myChart = this.$refs.myChart; //通过ref获取到DOM节点
if (myChart) {
const thisChart = this.$echarts.init(myChart); //利用原型调取Echarts的初始化方法
const option = {
title: {
//标题组件，包含主标题和副标题。
show: true, //是否显示标题组件
text: "动漫前十排行榜", //主标题文本，支持使用 \n 换行。
textStyle: {
color: "#f00", //主标题文字的颜色。
fontSize: 50, //主标题文字的字体大小
},
left: 500,
top: 100,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
top: "25%",
bottom: "20%",
},
legend: {},
xAxis: [
{
type: "category",
data: xdata,
axisTick: {
alignWithLabel: true,
},
axisLabel: {
//坐标轴刻度标签
show: true,
color: "#c56cf0",
},
axisLine: {
//轴线
show: false,
},
},
],
yAxis: [
{
type: "value", //数值轴，适用于连续数据
// max: 100,
name: "热度",
splitNumber: 4, // 设置分几段显示
nameTextStyle: {
color: "#ff3838",
},
axisLine: {
show: false,
},
//横向网格线设置
splitLine: {
show: true,
lineStyle: {
color: ["#32ff7e"],
type: "dashed",
},
width: 1,
},
axisLabel: {
//坐标轴刻度标签
show: true,
color: "#c56cf0",
interval: "auto",
formatter: "{value} ", // 给每个数值添加%
},
},
],
series: [
{
type: "bar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0.5,
color: "#1879D4", // 0% 处的颜色
},
{
offset: 1,
color: "#30C4EF", // 60% 处的颜色
},
],
false
),
},
},
barWidth: "25",
label: {
normal: {
show: true,
fontSize: 14,
fontWeight: "400",
position: "top",
color: "#91A4B7",
// 自定义顶部文字写判断
formatter: function (val) {
if (val.dataIndex === 0) {
return `TOP1`;
} else if (val.dataIndex === 1) {
return `TOP2`;
} else if (val.dataIndex === 2) {
return `TOP3`;
} else if (val.dataIndex === 3) {
return `TOP4`;
} else if (val.dataIndex === 4) {
return `TOP5`;
} else if (val.dataIndex === 5) {
return `TOP6`;
} else if (val.dataIndex === 6) {
return `TOP7`;
} else if (val.dataIndex === 7) {
return `TOP8`;
} else if (val.dataIndex === 8) {
return `TOP9`;
} else if (val.dataIndex === 9) {
return `TOP10`;
}
},
},
},
data: [
{
value: ydata[0],
itemStyle: {
//单独配置前三名颜色
normal: {
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0.5,
color: "#FC2F2F", // 柱状 0% 处的颜色
},
{
offset: 1,
color: "#FC6D66", // 60% 处的颜色
},
],
false
),
},
},
label: {
normal: {
color: "#F7517F", //柱状图顶部文字颜色
},
},
},
{
value: ydata[1],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0.5,
color: "#FD462E", // 0% 处的颜色
},
{
offset: 1,
color: "#FE9E2C", // 60% 处的颜色
},
],
false
),
},
},
label: {
normal: {
color: "#FE9239",
},
},
},
{
value: ydata[2],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0.5,
color: "#FCB12F", // 0% 处的颜色
},
{
offset: 1,
color: "#FEF564", // 60% 处的颜色
},
],
false
),
},
},
label: {
normal: {
color: "#FEEB1A",
},
},
},
ydata[3],
ydata[4],
ydata[5],
ydata[6],
ydata[7],
ydata[8],
ydata[9],
],
},
],
};
thisChart.setOption(option); //将编写好的配置项挂载到Echarts上
window.addEventListener("resize", function () {
thisChart.resize(); //页面大小变化后Echarts也更改大小
});
}
},
},
};
</script>
<style lang='scss' scoped>
</style>
横向排行图
-
效果图
2.echarts配置代码
<template>
<div class="page2">
<div ref="myChart" style="width: 100%; height: 100%" id="myChart"></div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
yData: [
"斗罗大陆",
"斗破苍穹年番",
"龙族",
"西行纪",
"画江湖之不良人",
],
seriesData: [2000, 1800, 1600, 1400, 1200],
};
},
created() {
this.init();
},
computed: {},
watch: {},
mounted() {
this.setMyEchart(this.yData, this.seriesData);
},
methods: {
setMyEchart(yData, seriesData) {
const myChart = this.$refs.myChart; //通过ref获取到DOM节点
if (myChart) {
const thisChart = this.$echarts.init(myChart); //利用原型调取Echarts的初始化方法
const option = {
tooltip: {
trigger: "item",
formatter: (p) => {
if (p.seriesName === "total") {
return "";
}
return `${p.name}<br/>播放量: ${p.value}万次`;
},
},
legend: {
show: false,
},
grid: {
left: 50,
top: 36,
right: 50,
},
xAxis: {
type: "value",
name: "播放量/万次",
nameLocation: "end",
nameTextStyle: {
fontSize: 14,
color: "#666666",
padding: [60, 0, 0, -65],
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
color: "#555555",
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#e2e4e8",
},
},
},
yAxis: [
{
type: "category",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisPointer: {
label: {
show: false,
margin: 30,
},
},
data: yData,
axisLabel: {
margin: 40,
fontSize: 14,
align: "left",
color: "#333",
// 配置序号背景
rich: {
a1: {
color: "#fff",
backgroundColor: { //插入图片
image: require("@/assets/images/echarts/p_m1.png"),
},
width: 30,
height: 30,
align: "center",
borderRadius: 2,
},
a2: {
color: "#fff",
backgroundColor: {
image: require("@/assets/images/echarts/p_m2.png"),
},
width: 30,
height: 30,
align: "center",
borderRadius: 2,
},
a3: {
color: "#fff",
backgroundColor: {
image: require("@/assets/images/echarts/p_m3.png"),
},
width: 30,
height: 30,
align: "center",
borderRadius: 2,
},
b: {
color: "#fff",
backgroundColor: "#40407a",
width: 30,
height: 30,
lineHeight: 30,
align: "center",
verticalAlign: "middle",
borderRadius: 15,
},
},
formatter: function (params, index) {
var leftIndex = index + 1;
if (leftIndex < 4) {
return [
"{a" + leftIndex + "|" + leftIndex + "}" + " ",
].join("\n");
} else {
return ["{b|" + leftIndex + "}" + " "].join("\n");
}
},
},
},
{
type: "category",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisPointer: {
label: {
show: false,
inside: false,
},
},
data: yData,
axisLabel: {
show: false,
},
},
],
series: [
{
zlevel: 1,
name: "value",
type: "bar",
barGap: "-100%",
barWidth: 20,
legendHoverLink: false,
data: seriesData,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#1595f8", // 0% 处的颜色
},
{
offset: 1,
color: "#51eff9", // 100% 处的颜色
},
],
},
barBorderRadius: [0, 10, 10, 0],
},
// 配置柱子上方类目轴名字
label: {
show: true,
position: [0, "-15px"],
color: "#f00",
fontSize: 14,
offset: [0, 0],
formatter: function (a) {
return `${a.name}`;
},
},
},
{
zlevel: 2,
name: "播放量",
type: "bar",
barWidth: 20,
data: seriesData,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#1879D4", // 0% 处的颜色
},
{
offset: 1,
color: "#30C4EF", // 100% 处的颜色
},
],
},
barBorderRadius: [0, 10, 10, 0],
},
label: {
show: true,
position: "right",
color: "#c56cf0",
fontSize: 14,
offset: [10, 1],
},
},
],
};
thisChart.setOption(option); //将编写好的配置项挂载到Echarts上
window.addEventListener("resize", function () {
thisChart.resize(); //页面大小变化后Echarts也更改大小
});
}
},
},
};
</script>
<style lang='scss' scoped>
.page2 {
width: 600px;
height: 400px;
}
</style>
异步请求数据渲染
areaData父组件异步请求传递的数据chartData从大到小排序后的数据
<template>
<div ref="myChart" style="width: 100%; height: 100%" id="myChart"></div>
</template>
<script>
export default {
name: "",
data() {
return {
chartData: {
xdata: [],
ydata: [],
},
};
},
created() {},
props: {
areaData: {
type: Array,
default: null,
},
},
computed: {},
watch: {
areaData: { //父组件传过来的数据
handler(val) {
let that = this;
if (val) {
//根据num数值大小排序
let httpData = JSON.parse(JSON.stringify(val));
if (httpData && httpData.length > 0) {
const newData = httpData.sort(
(a, b) => parseInt(a.num) - parseInt(b.num)
);
newData.forEach((item) => {
that.chartData.xdata.push(item.num);
that.chartData.ydata.push(item.name);
});
}
}
},
immediate: true,
deep: true,
},
chartData: {
//有数据更新DOM
handler(val) {
if (val.xdata.length > 0 && val.ydata.length > 0) {
this.setMyEchart(val.xdata, val.ydata);
}
},
deep: true,
immediate: true,
},
},
mounted() {
// 更新DOM
this.setMyEchart(this.chartData.xdata, this.chartData.ydata);
},
methods: {
setMyEchart(xdata, ydata) {
const myChart = this.$refs.myChart; //通过ref获取到DOM节点
if (myChart) {
const thisChart = this.$echarts.init(myChart); //利用原型调取Echarts的初始化方法
const option = {
tooltip: {
trigger: "axis",
},
grid: {
left: "70",
right: "20",
bottom: "0",
top: "0",
containLabel: false,
},
xAxis: {
type: "value",
show: false,
},
yAxis: {
type: "category",
data: ydata,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
margin: 70,
width: 80,
align: "left",
overflow: "truncate",
formatter: function (value, index) {
let ind = index + 1;
if (ind == ydata.length) {
return (
"{one|" + (ydata.length - index) + "} {a|" + value + "}"
);
} else if (ind + 1 == ydata.length) {
return (
"{two|" + (ydata.length - index) + "} {b|" + value + "}"
);
} else if (ind + 2 == ydata.length) {
return (
"{three|" + (ydata.length - index) + "} {c|" + value + "}"
);
}
if (ydata.length - index > 9) {
return (
"{five|" + (ydata.length - index) + "} {d|" + value + "}"
);
}
return (
"{four|" + (ydata.length - index) + "} {d|" + value + "}"
);
},
rich: {
a: {
color: "#59c9f9",
},
b: {
color: "#59c9f9",
},
c: {
color: "#59c9f9",
},
d: {
color: "#59c9f9",
},
// 第一名
one: {
backgroundColor: "#E86452",
color: "white",
width: 12,
height: 16,
padding: [1, 0, 0, 5],
borderRadius: 10,
fontSize: 11,
},
// 第二名
two: {
backgroundColor: "#FF9845",
color: "white",
width: 12,
height: 16,
padding: [1, 0, 0, 5],
borderRadius: 10,
fontSize: 11,
},
// 第三名
three: {
backgroundColor: "#F6BD16",
color: "white",
width: 12,
height: 16,
padding: [1, 0, 0, 5],
borderRadius: 10,
fontSize: 11,
},
// 一位数
four: {
backgroundColor: "rgba(0,0,0,0.15)",
color: "white",
width: 12,
height: 16,
padding: [1, 0, 0, 5],
borderRadius: 10,
fontSize: 11,
},
// 两位数
five: {
backgroundColor: "rgba(0,0,0,0.15)",
color: "white",
width: 16,
height: 16,
padding: [1, 0, 0, 1],
borderRadius: 10,
fontSize: 11,
},
},
},
},
series: [
{
type: "bar",
showBackground: true,
label: {
show: true,
position: "right",
color: "rgba(0,0,0,0.45)",
},
barWidth: 10,
itemStyle: {
color: "#22CFE3",
},
data: xdata,
},
],
};
thisChart.setOption(option); //将编写好的配置项挂载到Echarts上
window.addEventListener("resize", function () {
thisChart.resize(); //页面大小变化后Echarts也更改大小
});
}
},
},
};
</script>
<style lang='scss' scoped>
</style>
