一、饼图
1.饼图显示数据时的百分比
效果图一：
只需要在tooltip中加入如下代码:
tooltip: {
trigger: "item",
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
如果你想显示百分比的时候也是带单位的，效果图和代码如下：
tooltip: {
trigger: "item",
formatter: function (params) {
var name = params.data.name;
var value = params.data.value + " 元";
var percent = params.percent + "%";
return name + " : " + value + " (" + percent + ")";
}
},
//或者
// formatter: '{a} <br/>{b} : {c} 元 ({d}%)'
效果图二：
如果你又想在饼图颜色里显示百分比,在label中添加formatter: ‘{b}: {d}%’ ,效果图和代码如下:
series: [
{
name: "总支付",
type: "pie",
legendHoverLink: false,
minAngle: 10, // 设置每块扇形的最小占比
radius: ["0%", "60%"],
center: ["50%", "36%"],
data: [
{
value: 10,
name: "微信",
},
{
value: 23,
name: "支付宝",
},
],
avoidLabelOverlap: false,
label: {
//饼图图形上的文本标签
show: true,
position: "inner",
//formatter: "{d}%", //只显示百分比
formatter: '{b}: {d}%'
},
labelLine: {
show: false,
},
},
],
效果图三：
2.饼图图例带数字+单位
如果你想在饼图图例后接数据或百分比,如下效果:
这里既在图例中添加了单位,也添加了百分比,代码如下:
legend: {
formatter: function (name) {
var arr = [];
let data = option.series[0].data;
var index = 0;
var total = 0;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
index = i;
}
}
var percentage = ((data[index].value / total) * 100).toFixed(2); // 计算百分比，保留两位小数
arr.push(
"{name|" + name + "}",
"{text|" + " " + ":" + " " + "}",
"{value|" + data[index].value + "}",
"{text|" + " " + "元" + "}",
"{percentage| (" + percentage + "%)}"
);
return arr.join("");
},
textStyle: {
color: '#000000',
// 实测：设置了图例legend的formatter回调函数用户复杂的样式设置时,一定要又rich富文本配置,否则失效
// 且width和fontSize同时设置会失效
rich: {
name: {
align: "left",
fontSize: titleFontSize * 1.2,
},
value: {
align: "left",
color: "#ffffff",
fontSize: titleFontSize * 1.8,
},
text: {
fontSize: titleFontSize * 1.2,
},
},
},
},
以上所以总的代码vue文件:
<template>
<div class="content">
<div>饼图</div>
<div class="line_refs" ref="line_refs"></div>
<!-- <raduis-echarts></raduis-echarts> -->
</div>
</template>
<script>
import raduisEcharts from '../components/raduisEcharts.vue';
export default {
components: { raduisEcharts },
data() {
return {
chartInstance: null,
option: {},
};
},
mounted() {
this.initChart();
this.screenAdapter();
window.addEventListener("resize", this.screenAdapter);
},
destroyed() {
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
initChart() {
this.chartInstance = this.$echarts.init(this.$refs.line_refs);
const titleFontSize = (this.$refs.line_refs.offsetWidth / 100) * 3;
const option = {
legend: {
formatter: function (name) {
var arr = [];
let data = option.series[0].data;
var index = 0;
var total = 0;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
index = i;
}
}
var percentage = ((data[index].value / total) * 100).toFixed(2); // 计算百分比，保留两位小数
arr.push(
"{name|" + name + "}",
"{text|" + " " + ":" + " " + "}",
"{value|" + data[index].value + "}",
"{text|" + " " + "元" + "}",
"{percentage| (" + percentage + "%)}"
);
return arr.join("");
},
textStyle: {
color: '#000000',
// 实测：设置了图例legend的formatter回调函数用户复杂的样式设置时,一定要又rich富文本配置,否则失效
// 且width和fontSize同时设置会失效
rich: {
name: {
align: "left",
fontSize: titleFontSize * 1.2,
},
value: {
align: "left",
color: "#ffffff",
fontSize: titleFontSize * 1.8,
},
text: {
fontSize: titleFontSize * 1.2,
},
},
},
},
tooltip: {
trigger: "item",
formatter: function (params) {
var name = params.data.name;
var value = params.data.value + " 元";
var percent = params.percent + "%";
return name + " : " + value + " (" + percent + ")";
}
},
series: [
{
name: "总支付",
type: "pie",
legendHoverLink: false,
minAngle: 10, // 设置每块扇形的最小占比
radius: ["0%", "60%"],
center: ["50%", "36%"],
data: [
{ value: 10, name: "微信" },
{ value: 23, name: "支付宝" },
],
avoidLabelOverlap: false,
label: {
//饼图图形上的文本标签
show: true,
position: "inner", //标签的位置
formatter: '{b}: {d}%'
},
labelLine: {
show: false,
},
},
],
};
//把配置项给实例对象
this.chartInstance.setOption(option);
},
//饼状图自适应
screenAdapter() {
//自己定义的比较合适的适配大小
const titleFontSize = (this.$refs.line_refs.offsetWidth / 100) * 2.4;
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
const option = {
legend: {
// type: 'scroll', //宽度太小时会滑动
orient: "horizontal",
bottom: 20,
left: "center",
textStyle: {
fontSize: titleFontSize * 1.5, // 设置文字大小
color: "#ffffff", // 设置文字颜色
},
//图例距离饼图的距离
// itemGap: 5,
itemWidth: titleFontSize,
itemHeight: titleFontSize,
},
};
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
this.chartInstance.setOption(option);
//手动的调用图标对象的resize才能产生效果
this.chartInstance.resize();
},
}
}
</script>
<style scoped>
.content {
display: flex;
flex-direction: column;
background-color: rgb(89, 92, 94);
}
.line_refs {
width: 500px;
height: 300px;
margin: 50px;
}
.radius_refs {
width: 800px;
height: 500px;
}
</style>
3.两个饼图
一个div里面有两个饼图，就是series里有两个对象，保证图例legend的data统一，两个饼图就会共用一个图例，代码：
series: [
{
name: "总支付",
type: "pie",
legendHoverLink: false,
minAngle: 10, // 设置每块扇形的最小占比
radius: ["0%", "60%"],
center: ["50%", "36%"],
data: [
{ value: 10, name: "微信" },
{ value: 23, name: "支付宝" },
],
avoidLabelOverlap: false,
label: {
//饼图图形上的文本标签
show: true,
position: "inner", //标签的位置
formatter: '{b}: {d}%'
},
labelLine: {
show: false,
},
},
{
name: "总收入",
type: "pie",
legendHoverLink: false,
minAngle: 10, // 设置每块扇形的最小占比
radius: ["0%", "60%"],
center: ["80%", "36%"],
data: [
{ value: 40, name: "微信" },
{ value: 233, name: "支付宝" },
],
avoidLabelOverlap: false,
label: {
//饼图图形上的文本标签
show: true,
position: "inner", //标签的位置
formatter: '{b}: {d}%'
},
labelLine: {
show: false,
},
},
],
效果如下：
同理，想要同一个div里有一个饼图，一个折线图，也是修改series的第二个对象为折线图类型。
4.环形饼图中间带数字
环形饼图中间带数字或文字，设置title并且定位到想要的位置，并且环形图中间有一个修饰的圆线。效果如下：
添加代码：
title: {
text: "总支付",
textStyle: {
color: "#ffffff",
},
subtextStyle: {
color: "#ffffff",
},
textAlign: "center",
x: "49%",
y: "33%", //距离上边的距离
},
vue文件：
<template>
<div class="content">
<div>饼图</div>
<div class="line_refs" ref="line_refs"></div>
<!-- <raduis-echarts></raduis-echarts> -->
</div>
</template>
<script>
import raduisEcharts from '../components/raduisEcharts.vue';
export default {
components: { raduisEcharts },
data() {
return {
chartInstance: null,
option: {},
};
},
mounted() {
this.initChart();
this.screenAdapter();
window.addEventListener("resize", this.screenAdapter);
},
destroyed() {
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
initChart() {
this.chartInstance = this.$echarts.init(this.$refs.line_refs);
const titleFontSize = (this.$refs.line_refs.offsetWidth / 100) * 3;
const option = {
//环形图中间文字
title: {
text: "总支付",
textStyle: {
color: "#ffffff",
},
subtextStyle: {
color: "#ffffff",
},
textAlign: "center",
x: "49%",
y: "33%", //距离上边的距离
},
tooltip: {
trigger: "item",
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [
{
name: "总支付",
type: "pie",
legendHoverLink: false,
minAngle: 10, // 设置每块扇形的最小占比
radius: ["40%", "60%"],
center: ["50%", "36%"],
data: [
{ value: 10, name: "微信" },
{ value: 23, name: "支付宝" },
],
avoidLabelOverlap: false,
label: {
//饼图图形上的文本标签
show: false
},
labelLine: {
show: false,
},
},
// 内圈
{
name: "修饰样式用",
type: "pie",
legendHoverLink: false,
silent: true, //鼠标移入不显示内容，不触发鼠标事件
minAngle: 10, // 设置每块扇形的最小占比
radius: ["34%", "36%"],
center: ["50%", "36%"],
data: [
{ value: 9, name: "" },
],
label: {
show: false,
},
itemStyle: {
color: "#4c4d59", // 设置内圈饼图的颜色
},
},
],
};
//把配置项给实例对象
this.chartInstance.setOption(option);
},
//饼状图自适应
screenAdapter() {
//自己定义的比较合适的适配大小
const titleFontSize = (this.$refs.line_refs.offsetWidth / 100) * 2.4;
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
const option = {
legend: {
// type: 'scroll', //宽度太小时会滑动
orient: "horizontal",
bottom: 20,
left: "center",
textStyle: {
fontSize: titleFontSize * 1.5, // 设置文字大小
color: "#ffffff", // 设置文字颜色
},
//图例距离饼图的距离
// itemGap: 5,
itemWidth: titleFontSize,
itemHeight: titleFontSize,
},
};
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
this.chartInstance.setOption(option);
//手动的调用图标对象的resize才能产生效果
this.chartInstance.resize();
},
}
}
</script>
<style scoped>
.content {
display: flex;
flex-direction: column;
background-color: rgb(89, 92, 94);
}
.line_refs {
width: 500px;
height: 300px;
margin: 50px;
}
.radius_refs {
width: 800px;
height: 500px;
}
</style>
感觉这种写法没有很好的适应页面被我淘汰了，直接一个定位div很香
二、折线图
1.折线图数据添加单位
效果图一：
只需要在图例的文字描述后添加单位，代码：
series: [
{
name: "用水量(吨)",
type: "line",
smooth: true,
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
data: [1, 2, 3, 3, 2, 4, 5, 2, 3],
//折线颜色
itemStyle: {
color: "#d48e17", //折线点的颜色
lineStyle: {
color: "#d48e17", //折线的颜色
},
},
},
],
效果图二：
同样也可以在tooltip里写函数，代码如下：
tooltip: {
trigger: "axis",
formatter: function (params) {
var relVal = params[0].name;
//如果图例名称为用水量，则添加吨的单位，否则是百分比%
for (var i = 0; i < params.length; i++) {
relVal +=
"<br/>" +
params[i].marker +
params[i].seriesName + " " +
(params[i].seriesName == "用水量"
? params[i].value + "吨"
: params[i].value + "%") +
"</br>";
}
return relVal;
},
},
或者在serise对象里写：
series: [
{
name: "用水量",
type: "line",
smooth: true,
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
data: [1, 2, 3, 3, 2, 4, 5, 2, 3],
//折线颜色
itemStyle: {
color: "#d48e17", //折线点的颜色
lineStyle: {
color: "#d48e17", //折线的颜色
},
},
tooltip: {
valueFormatter: function (value) {
return value + "吨";
},
},
},
]
效果图三：tooltip添加单位+ 修改文字样式
你有多条series对象，即有多条折线图展示不同的单位，可以这样写：
tooltip: {
trigger: "axis",
// 自定义 tooltip 内容
formatter: function (params) {
var res = params[0].name + "<br/>";
for (var i = 0, l = params.length; i < l; i++) {
var seriesName = params[i].seriesName;
var value = params[i].value;
var marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[i].color + '"></span>';
// 根据不同的seriesName 返回不同的单位
if (seriesName === '用水量') {
res += marker + seriesName + ":" + '<span style="color: #000000; font-weight: bold;margin-left:5px">' + value + "吨" + "</span><br>";
} else if (seriesName === '温度') {
res += marker + seriesName + ":" + '<span style="color: #000000; font-weight: bold;margin-left:5px">' + value + "℃" + "</span><br>";
} else if (seriesName === '金额') {
res += marker + seriesName + ":" + '<span style="color: #000000; font-weight: bold;margin-left:5px">' + value + "元" + "</span><br>";
}
else {
res += marker + seriesName + ":" + '<span style="color: #000000; font-weight: bold;margin-left:5px">' + value + "</span><br>";
}
}
return res;
},
},
vue文件：
<template>
<div class="content">
<div>折线图</div>
<div class="radius_refs" ref="radius_refs"></div>
</div>
</template>
<script>
export default {
data() {
return {
chartInstance: null,
option: {},
};
},
mounted() {
// this.getChartData()
this.initChart();
this.screenAdapter();
window.addEventListener("resize", this.screenAdapter);
},
destroyed() {
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
initChart() {
this.chartInstance = this.$echarts.init(this.$refs.radius_refs);
this.option = {
tooltip: {
trigger: "axis",
// 自定义 tooltip 内容
formatter: function (params) {
var res = params[0].name + "<br/>";
for (var i = 0, l = params.length; i < l; i++) {
var seriesName = params[i].seriesName;
var value = params[i].value;
var marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[i].color + '"></span>';
// 根据不同的seriesName 返回不同的单位
if (seriesName === '用水量') {
res += marker + seriesName + ":" + '<span style="color: #000000; font-weight: bold;margin-left:5px">' + value + "吨" + "</span><br>";
} else if (seriesName === '温度') {
res += marker + seriesName + ":" + '<span style="color: #000000; font-weight: bold;margin-left:5px">' + value + "℃" + "</span><br>";
} else if (seriesName === '金额') {
res += marker + seriesName + ":" + '<span style="color: #000000; font-weight: bold;margin-left:5px">' + value + "元" + "</span><br>";
}
else {
res += marker + seriesName + ":" + '<span style="color: #000000; font-weight: bold;margin-left:5px">' + value + "</span><br>";
}
}
return res;
},
},
legend: {
show: true,
data: ["用水量", "金额"],
selectedMode: true, // 是否允许图例进行点击
icon: "cricle", //图例样式，可以自行查看样式选择
//图例文字颜色
textStyle: {
color: "#ffff",
fontSize: 16, //这里改字体大小
},
// left: "73%",
left: "66%",
top: "5",
//图例距离饼图的距离
itemGap: 5,
itemWidth: 10,
itemHeight: 5,
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
//设置为true代表离零刻度间隔一段距离
boundaryGap: true,
data: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号"],
// 修饰刻度标签的颜色即x坐标数据
axisLabel: {
color: "rgba(255,255,255,.7)",
},
axisTick: {
show: false, // 不显示坐标轴刻度线
},
// 去除x坐标轴的颜色
axisLine: {
show: false,
},
},
yAxis: {
min: 0,
miniInterval: 5,
type: "value",
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "rgba(255,255,255,.7)",
},
// 显示y坐标轴的颜色
axisLine: {
show: true,
lineStyle: {
// X 轴颜色配置
color: "#707070",
},
},
// 修改y轴分割线的颜色
splitLine: {
lineStyle: {
color: "#707070",
},
},
},
series: [
{
name: "用水量",
type: "line",
smooth: true,
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
data: [1, 2, 3, 3, 2, 4, 5, 2, 3],
//折线颜色
itemStyle: {
color: "#d48e17", //折线点的颜色
lineStyle: {
color: "#d48e17", //折线的颜色
},
},
},
{
name: "金额",
type: "line",
smooth: true,
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
data: [6, 7, 8, 9, 6, 7, 10, 10, 20],
//折线颜色
itemStyle: {
color: "#44a2ff", //折线点的颜色
lineStyle: {
color: "#44a2ff", //折线的颜色
},
},
},
],
};
//把配置项给实例对象
this.chartInstance.setOption(this.option, true);
},
//自适应
screenAdapter() {
//自己定义的比较合适的适配大小
const titleFontSize = (this.$refs.radius_refs.offsetWidth / 100) * 2.4;
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
const option1 = {
};
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
this.chartInstance.setOption(option1);
//手动的调用图标对象的resize才能产生效果
this.chartInstance.resize();
},
}
}
</script>
<style scoped>
.content {
display: flex;
flex-direction: column;
}
.radius_refs {
width: 800px;
height: 500px;
}
</style>
2.折线图y轴添加单位
效果图一：
在 yAxis里添加：
axisLabel: {
formatter: '{value} 吨',
textStyle: {
color: '#ffffff' // 设置刻度标签的字体颜色为红色
}
}
效果图二：
在Y轴顶部,同样在 yAxis里添加：
name: "吨", // y 轴的单位描述
nameTextStyle: {
fontSize: 15, // 调整字体大小
color: "#fff", // 调整字体颜色
// 其他样式属性...
},
3.修改折线图的颜色及阴影部分
效果：
在series对象里添加itemStyle和areaStyle属性设置：
series: [
{
name: "金额",
type: "line",
smooth: true,
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
data: [10, 11, 9, 12, 6, 8, 7, 9, 9],
//折线颜色
itemStyle: {
color: "#44a2ff", //折线点的颜色
lineStyle: {
color: "#44a2ff", //折线的颜色
},
},
areaStyle: {
color: {
//线性渐变
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(11, 117, 211, 1)", // 0% 处的颜色
},
{
offset: 0.8,
color: "rgba(11, 117, 211,0.2)", // 100% 处的颜色
},
],
},
},
tooltip: {
valueFormatter: function (value) {
return value + "元";
},
},
},
],
4.用按钮代替图例的点击方法
效果：点击用水量显示用水量的折线，点击金额显示金额的折线
vue文件：
<template>
<div class="content">
<div>折线图</div>
<div class="timebig">
<div class="mr" v-for="(item, index) in timeData" :key="index" @click="handleEnter(index)"
:class="{ timeStyle: timeIndex == index }">
{{ item.title }}
</div>
</div>
<div class="radius_refs" ref="radius_refs"></div>
</div>
</template>
<script>
export default {
data() {
return {
chartInstance: null,
option: {},
timeData: [{ title: "用水量" }, { title: "金额" }],
timeIndex: 0, //用水量
};
},
mounted() {
// this.getChartData()
this.initChart();
this.screenAdapter();
window.addEventListener("resize", this.screenAdapter);
},
destroyed() {
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
handleEnter(index) {
this.timeIndex = index;
this.screenAdapter();
},
initChart() {
this.chartInstance = this.$echarts.init(this.$refs.radius_refs);
this.option = {
tooltip: {
trigger: "axis",
},
legend: {
show: true,
data: ["用水量", "金额"],
selectedMode: false, // 是否允许图例进行点击
show: true, // 显示图例，如果显示图例selectedMode要设置为false,
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
//设置为true代表离零刻度间隔一段距离
boundaryGap: true,
data: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号"],
// 修饰刻度标签的颜色即x坐标数据
axisLabel: {
color: "rgba(255,255,255,.7)",
},
axisTick: {
show: false, // 不显示坐标轴刻度线
},
// 去除x坐标轴的颜色
axisLine: {
show: false,
},
},
yAxis: {
min: 0,
miniInterval: 5,
type: "value",
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "rgba(255,255,255,.7)",
},
// 显示y坐标轴的颜色
axisLine: {
show: true,
lineStyle: {
// X 轴颜色配置
color: "#707070",
},
},
// 修改y轴分割线的颜色
splitLine: {
lineStyle: {
color: "#707070",
},
},
},
series: [
{
name: "用水量",
type: "line",
smooth: true,
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
data: [1, 2, 3, 3, 2, 4, 5, 2, 3],
//折线颜色
itemStyle: {
color: "#d48e17", //折线点的颜色
lineStyle: {
color: "#d48e17", //折线的颜色
},
},
tooltip: {
valueFormatter: function (value) {
return value + "吨";
},
},
},
{
name: "金额",
type: "line",
smooth: true,
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
data: [10, 11, 9, 12, 6, 8, 7, 9, 9],
//折线颜色
itemStyle: {
color: " #00be97",
lineStyle: {
color: " #00be97", //折线的颜色
},
},
tooltip: {
valueFormatter: function (value) {
return value + "元";
},
},
},
],
};
//把配置项给实例对象
this.chartInstance.setOption(this.option, true);
},
screenAdapter() {
//自己定义的比较合适的适配大小
const titleFontSize = this.$refs.radius_refs.offsetWidth / 130;
const adapterOption = {
// 一开始两条折线都不显示
legend: {
selected: {
"用水量": false,
"金额": false,
},
},
series: [
{
name: "用水量",
data: [1, 2, 3, 3, 2, 4, 5, 2, 3],
},
{
name: "金额",
data: [10, 11, 9, 12, 6, 8, 7, 9, 9],
},
],
};
switch (this.timeIndex) {
// 如果按钮的点击了"用水量",控制图例点击显示用水量的那条折线
case 0:
adapterOption.legend.selected["用水量"] = true;
break;
// 如果按钮的点击了"金额",控制图例点击显示金额的那条折线
case 1:
adapterOption.legend.selected["金额"] = true;
break;
}
this.chartInstance.setOption(adapterOption);
this.chartInstance.resize();
},
}
}
</script>
<style scoped>
.content {
display: flex;
flex-direction: column;
}
.timebig {
display: flex;
flex-direction: row;
width: 150px;
border-radius: 4px;
background-color: #f4f6f2;
overflow: hidden;
margin-left: 50px;
cursor: pointer;
}
.mr {
width: 70px;
padding: 10px;
font-size: 18px;
color: #000000;
text-align: center;
}
.timeStyle {
color: #ffffff;
background-color: #1ab395;
}
.radius_refs {
width: 800px;
height: 500px;
}
</style>
我这里是series里有多条数据对象，如果你只有一条数据对象，不需要采用selected控制图例的方法，可以正常的折线图写法不显示图例，然后点击“用水量”和"金额"的时候，分别赋值不同的数据给series对象的data就行
5.双y轴且两边y轴分割线一致
什么时候需要使用到双y轴？
有两条以上的折线图/柱状图，或者两条折线数据单位不一致，或者两条数据相差太大，如下：
这样就会导致用水量的数据看起来像一直是0一样，没有变化。我们可双y轴去表达，如下：
vue文件：
<template>
<div class="content">
<div>折线图</div>
<div class="radius_refs" ref="radius_refs"></div>
</div>
</template>
<script>
export default {
data() {
return {
chartInstance: null,
option: {},
};
},
mounted() {
this.initChart();
this.screenAdapter();
window.addEventListener("resize", this.screenAdapter);
},
destroyed() {
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
handleEnter(index) {
this.timeIndex = index;
this.screenAdapter();
},
initChart() {
// 对接时我们需要计算出两条折线图分别的最大值最小值,这里是写死数据直接看出来
// 金额最小值为1,最大值为5;用水量最小值为600,最大值为2000
// 这些值用于配置yAxis里的 min,max,interval属性
var Min1 = 1;
var Min2 = 600;
var Max1 = 5;
var Max2 = 2000;
console.log("Min1", Min1);
console.log("Min2", Min2);
console.log("Max1", Max1);
console.log("Max2", Max2);
this.chartInstance = this.$echarts.init(this.$refs.radius_refs);
this.option = {
tooltip: {
trigger: "axis",
},
legend: {
show: true,
data: ["用水量", "金额"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
//设置为true代表离零刻度间隔一段距离
boundaryGap: true,
data: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号"],
// 修饰刻度标签的颜色即x坐标数据
axisLabel: {
color: "rgba(255,255,255,.7)",
},
axisTick: {
show: false, // 不显示坐标轴刻度线
},
// 去除x坐标轴的颜色
axisLine: {
show: false,
},
},
yAxis: [
//两个y轴
{
type: "value",
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "#ffffff",
},
// 不显示y轴侧边
axisLine: {
show: false,
},
name: '用水量(吨)', // 第一个 y 轴的单位描述
nameTextStyle: {
fontSize: 15, // 调整字体大小
color: '#fff' // 调整字体颜色
// 其他样式属性...
},
// 修改y轴分割线的颜色
splitLine: {
lineStyle: {
color: "#7b918c",
},
},
min: Min1,
max: Max1,
splitNumber: 10,
interval: (Max1 - Min1) / 10,
},
{
type: "value",
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "#ffffff",
// formatter: function (val) {
// return val + "%";
// }
},
// 不显示y轴侧边
axisLine: {
show: false,
},
name: '金额(元)', // 第一个 y 轴的单位描述
nameTextStyle: {
fontSize: 15, // 调整字体大小
color: '#fff' // 调整字体颜色
// 其他样式属性...
},
// 修改y轴分割线的颜色
splitLine: {
lineStyle: {
color: "#7b918c",
},
},
min: Min2,
max: Max2,
splitNumber: 10,
interval: (Max2 - Min2) / 10,
},
],
series: [
{
name: "用水量",
type: "line",
smooth: true,
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
data: [1, 2, 3, 3, 2, 4, 5, 2, 3],
//折线颜色
itemStyle: {
color: "#d48e17", //折线点的颜色
lineStyle: {
color: "#d48e17", //折线的颜色
},
},
tooltip: {
valueFormatter: function (value) {
return value + "吨";
},
},
},
{
name: "金额",
type: "line",
smooth: true,
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 8,
// 开始不显示拐点， 鼠标经过显示
showSymbol: false,
data: [2000, 1100, 900, 1200, 600, 800, 700, 900, 900],
yAxisIndex: 1, //表示y轴的索引,默认是0,1表示第二个索引即代表右边y轴
//折线颜色
itemStyle: {
color: "#44a2ff", //折线点的颜色
lineStyle: {
color: "#44a2ff", //折线的颜色
},
},
tooltip: {
valueFormatter: function (value) {
return value + "元";
},
},
},
],
};
//把配置项给实例对象
this.chartInstance.setOption(this.option, true);
},
screenAdapter() {
//自己定义的比较合适的适配大小,用于配置字体大小等适配
const titleFontSize = this.$refs.radius_refs.offsetWidth / 130;
const adapterOption = {
}
this.chartInstance.setOption(adapterOption);
this.chartInstance.resize();
},
}
}
</script>
<style scoped>
.content {
display: flex;
flex-direction: column;
}
.radius_refs {
width: 800px;
height: 500px;
}
</style>
有问题持续更新中…