需求：折线柱状图实现，显示不同提示，颜色，标记等等。
图例：
实现：
<template>
<div class="transaction-barline">
<p class="lenged-title">
<span class="single-lenged" v-for="(item,index) in headerNameList" :key="index">
<span class="common" :class="item.background">
<span v-if="item.type == 'line'" :class="'borderFail color'+index"></span>
</span>
<span >{{item.name}}</span>
</span>
</p>
<div class="v-chart-capital" ref="capitalBarLine"></div>
</div>
</template>
<script>
import echarts from "echarts/lib/echarts";
// 引入柱状图组件
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
// 引入提示框和title组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
require('echarts/lib/chart/custom');
export default {
name: "transaction-barline",
props: {
},
data() {
return {
myChart: null,
headerNameList:[
{ name: '雨具销售量', type: 'bar', background: "transItme0" },
{ name: '降水量', type: 'line', background: "firstFail" },
{ name: '温度', type: 'line', background: "firstFail1" }
],
detailData: {
barD: {
name: '雨靴',
list: [1,2,3,4,5,6,7,8,9,10,11,12]
},
lineG: {
name: '雨伞',
list: [10,20,30,40,50,60,70,80,90,10,11,12]
},
lineP: {
name: '雨衣',
list: [10,20,30,40,50,60,70,80,90,10,11,12]
}
},
colors: ['#C1D1F8', '#3266E8', '#5ECBA1', '#675bba'],
monthList:[
{
name: '1月',
english: 'Jan'
},
{
name: '2月',
english: 'Feb'
},
{
name: '3月',
english: 'Mar'
},
{
name: '4月',
english: 'Apr'
},
{
name: '5月',
english: 'May'
},
{
name: '6月',
english: 'Jun'
},
{
name: '7月',
english: 'Jul'
},
{
name: '8月',
english: 'Aug'
},
{
name: '9月',
english: 'Sep'
},
{
name: '10月',
english: 'Oct'
},
{
name: '11月',
english: 'Nov'
},
{
name: '12月',
english: 'Dec'
},
],
};
},
mounted: function() {
this.initChart();
},
created: () => {
},
watch: {
},
methods: {
initChart() {
this.setoption();
window.addEventListener("resize", this.myChart.resize);
},
setoption() {
let self = this;
if (this.myChart) {
this.myChart.dispose();
}
let that = this;
this.myChart = echarts.init(this.$refs.capitalBarLine);
let option = {
title: {
text: '雨天生意情况',
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'line',
lineStyle: {
color: 'transparent'
}
},
formatter: (params) => {
let str = '';
let dataIndex = params.dataIndex;
str += "<p style='color:#333;font-weight:bold'>" + params.name.slice(0,4)+'年'+ params.name.slice(5)+'月'+"</p>";
if (params.seriesType === 'bar') {
str += "<p>"+ params.seriesName + ": " + params.value +"</p>";
str += "<p>"+ this.detailData.barD.name + ":" +this.detailData.barD.list[dataIndex] + "</p>";
}
if (params.seriesType === 'line') {
str += "<p>"+ params.seriesName + ": " + params.value +"</p>";
if (params.seriesIndex == 1) {
str += "<p>"+ this.detailData.lineG.name + ":" +this.detailData.lineG.list[dataIndex] + "</p>";
} else {
str += "<p>"+ this.detailData.lineP.name + ":" +this.detailData.lineP.list[dataIndex] + "</p>";
}
}
return str;
},
backgroundColor: "#fff",
extraCssText:
"padding: 12px 20px; border-radius: 5px; line-height: 20px ; text-align: left; color: #37456E; box-shadow: 0 1px 8px 0 rgba(140,152,176,0.40);border-radius: 4px;",
textStyle: {
fontSize: 12,
fontFamily: '"PingFangSC-Regular", "Microsoft YaHei"'
},
},
xAxis: [
{
type: 'category',
data: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12'],
axisTick: {
show: false,
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(0,0,0,0.05)'
}
},
axisLabel: {
textStyle: {
color: "#333",
},
rotate: 45,
fontSize: 12,
fontFamily: '"PingFangSC-Medium", "Microsoft YaHei"',
formatter: (val) => {
return this.dataDute(val);
}
},
}
],
grid: {
right: '20%'
},
yAxis: [
{
type: 'value',
name: '雨具销售量',
min: 0,
max: 200,
interval: 20,
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(0,0,0,0.5)'
}
},
textStyle: {
color: "#7d889f"
},
splitLine: {
show: true
},
axisLabel: {
// show: false,
show: true,
formatter: (value, index) => {
// console.log(value, 'value');
return value;
},
textStyle: {
color: "#333",
},
fontFamily: '"PingFangSC-Medium", "Microsoft YaHei"'
}
},
{
type: 'value',
name: '降水量',
min: 0,
max: 100,
interval: 10,
axisLabel: {
show: true,
formatter: '{value} ml'
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(0,0,0,0.05)'
}
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: 'rgba(0,0,0,0.05)'
}
},
axisLabel: {
// show: true,
textStyle: {
color: "#333",
},
fontFamily: '"PingFangSC-Medium", "Microsoft YaHei"'
},
fontFamily: '"PingFangSC-Medium", "Microsoft YaHei"'
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
offset: 50,
axisLine: {
lineStyle: {
color: '#675bba'
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '雨具销售量',
type: 'bar',
legendHoverLink: false,
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: this.colors[0]
}, {
offset: 1,
color: this.colors[1]
}])
},
label: {
show: false,
color: '#333',
position: 'top',
fontFamily: '"PingFangSC-Regular", "Microsoft YaHei"',
},
data: [10,20,30,40,50,60,70,80,66,90,100,20]
},
{
name: '降水量',
type: 'line',
symbol: 'circle',
symbolSize: 5,
smooth: true,
legendHoverLink: false,
lineStyle: {
type: 'dotted',
color: this.colors[2],
width: 2
},
itemStyle: {
color: this.colors[2]
},
yAxisIndex: 1,
data: [10,20,22,10,30,30,40,100,24,55,67,90]
},
{
name: '平均温度',
type: 'line',
symbol: 'circle',
symbolSize: 5,
smooth: true,
legendHoverLink: false,
lineStyle: {
type: 'dotted',
color: this.colors[3],
width: 2
},
itemStyle: {
color: this.colors[3]
},
yAxisIndex: 2,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
}
this.myChart.setOption(option);
},
getInitData() {
let inputData = {
headerNameList:[
{ name: '雨具销售量', background: "transItme0" },
{ name: '降水量', background: "firstFail" },
{ name: '温度', background: "firstFail1" }
],
xAxisData: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12'],
yAxisData: [
{
name: '雨具销售量',
list: [10,20,30,40,50,60,70,80,66,90,100,20],
type: 'bar',
color: '#333'
}
]
};
},
dataDute(value) {
let str = '';
let df = value.split('-')[0],
dy = df.substr(2),
monthDay = value.split('-')[1],
deMonth = 0;
if(monthDay.substr(0,1) === '0') {
deMonth = monthDay.substr(1,1);
} else {
deMonth = monthDay;
}
let monthDays = deMonth+'月';
this.monthList.forEach((item, index) => {
if(item.name === monthDays) {
str = item.english + '-'+dy;
}
})
return str;
},
}
};
</script>
<style lang="less" scoped>
.transaction-barline{
position: relative;
height: 100%;
.v-chart-capital {
height: 356px;
}
.lenged-title {
width: 100%;
position: relative;
top: 80%;
margin: 20px 0;
text-align: center;
box-sizing: border-box;
font-size: 12px;
color: #333333;
font-weight: bold;
.single-lenged {
display: inline-block;
height: 20px;
line-height: 20px;
margin-right: 16px;
}
.common {
display: inline-block;
height: 0;
position: relative;
top: 1px;
margin-right: 5px;
height: 14px;
width: 20px;
.borderFail{
width: 4px;
height: 4px;
border-radius: 50%;
position: absolute;
bottom: -3px;
left: 8px;
// background: #5ECAA1;
}
.color1{
background: #5ECAA1;
}
.color2{
background: #675bba;
}
}
.single-lenged:hover {
cursor: pointer;
}
.transItme0{
background: -ms-linear-gradient(270deg, #C1D1F8 0%, #C1D1F8 20%, #3266E8 80%,#3266E8 100%);
background: -webkit-linear-gradient(270deg, #C1D1F8 0%, #C1D1F8 20%, #3266E8 80%,#3266E8 100%);
background: -o-linear-gradient(270deg, #C1D1F8 0%, #C1D1F8 20%, #3266E8 80%,#3266E8 100%);
}
.transItme1{
background: #5ECAA1;
}
.firstFail{
position: relative;
top: -4px;
border-bottom: 2px solid #5ECAA1;
}
.firstFail1{
position: relative;
top: -4px;
border-bottom: 2px solid #675bba;
}
}
}
</style>
