<template>
<div>
<!-- 图表存放的显示容器,必须设置宽度和高度,否则图表无法显示出来 -->
<div class="saleEcharts" :style="{ height: echartsHeight }" ref="saleEcharts"
v-show="saleData.length"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
props: ['saleData', "istitle", "lenged", 'echartsHeight'],
data() {
return {
}
},
watch: {
saleData: function (newval, oldval) {
this.getSaleCondition()
},
},
mounted() { this.getSaleCondition() },
methods: {
getSaleCondition() {
if (!this.saleData.length) return;
this.$nextTick(() => {
// 不建议使用id选择器,如果是组件复用的情况下会导致其他页面的图表无法显示
// 1.初始化图表,这里是在项目里面进行全局配置echarts,如果没有进行配置,官网上面有具体的写法https://echarts.apache.org/handbook/zh/get-started/
//安装echatrs,需要注意版本兼容问题,有些可能会报错,具体原因具体分析吧、npm install echarts
//import * as echarts from 'echarts';
let saleEcharts = echarts.init( this.$refs.saleEcharts);
// let saleEcharts = this.$echarts.init(
// this.$refs.saleEcharts
// );
// 获取到x轴
let xAxisData = [];
let seriesData = [];
//x轴和serise里面的数据进行处理
this.saleData.forEach((item) => {
xAxisData.push(item.date);
seriesData.push(item.sell_amout);
});
//设置标题,一写图表需要,一些图表则不需要
let title = this.istitle ? '销售额趋势分析图' : ''
// 配置图例, legend.data里面有数组,数组里面是每一个图例的配置
let legend = ''
if (this.lenged) {
legend = {
data: [
{
name: "销售额",
icon: "triangle",//图例显示的图案形状,可以取值,none 无形状,circle 圆形,rect 矩形,roundRect 圆角矩形,triangle 三角形,diamond 菱形,arrow 箭头
color: "#2dc079",
},
],
left: 'center',//位置top left bottom right
bottom: 0,
}
} else {
legend = ''
}
let saleEchartsOption = {
grid: {
left: '10%',
top: '10%',
right: '10%',
bottom: '10%',
containLabel: true
},
title: {
text: title,
},
color: ["#2dc079", "#2F80ED"],
tooltip: {
trigger: "axis",
},
legend,
xAxis: {
type: "category",
data: xAxisData,
axisTick: {
show: false,
},
axisLine: {
onZero: true,//刻度是否从零开始
lineStyle: {
color: "#999", //刻度线的颜色
},
},
axisLabel: {//刻度标签的设置,设置间隔,文字旋转度数,文字颜色等
// interval: intervalData,
// rotate:30
// textStyle: {
// color: "#999",
// },
},
offset: 10,
textStyle: {
color: "#ccch", //文字颜色
fontSize: "6", //文字大小
},
},
yAxis: {
type: "value",
axisTick: {
show: false,
},
axisLine: {
onZero: true,
lineStyle: {
color: "#999", //刻度线的颜色
},
},
name: "单位",//最上面显示单位
},
series: [
{
name: "销售额",
data: seriesData,
type: "line",//图表类型
smooth: true,//是否是光滑的曲线
symbol: "none",//每一个数值的点是否显示,如果设置不显示这无法在该点处显示具体的值
itemStyle: {
normal: {
lineStyle: {
color: "#2dc079",
},
},
},
},
],
};
saleEcharts.setOption(saleEchartsOption);
// 实现自适应大小
window.addEventListener("load", function () {
saleEcharts.resize();
});
window.addEventListener("resize", function () {
saleEcharts.resize();
});
});
},
},
}
</script>
<style lang="scss" scoped>
.noData {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
img {
width: 160px;
height: 160px;
display: block;
}
p {
display: block;
color: #666666;
}
}
.saleEcharts {
// width: 200px;
height: 300px;
padding-right: 20px;
box-sizing: border-box;
}</style>
双轴线设置
关键点在于y轴设置为数组,配置项为对象,增加属性 position: ‘left’, position: ‘right’,
series也需要设置的点在于yAxisIndex: 1 // 与第二个 Y 轴关联 , yAxisIndex: 0 // 与第一个 Y 轴关联
顺便解释一下yAxis里面type类型value 和log value 就是具体的数值,不做处理,log是对数据取对数10,适用于数据变化比较大的数据
yAxis: [
{
type: 'value',
position: 'left',
max:maxy0,
axisLabel: {
show: true,
textStyle: {
color: '#666'
},
// formatter: function(v) {
// return v.toFixed(2); //0表示小数为0位,1表示1位小数,2表示2位小数
// },
},
axisLine: {
lineStyle: {
color: '#F3F6FA'
}
},
splitLine: {
lineStyle: {
color: '#F3F6FA'
}
}
},
{
type: 'value',
position: 'right',
max:this.maxShowData,
axisLabel: {
show: true,
textStyle: {
color: '#666'
}
},
axisLine: {
lineStyle: {
color: '#F3F6FA'
}
},
splitLine: {
lineStyle: {
color: '#F3F6FA'
}
}
},
],
this.allSeries = [
{
name: '展现次数',
type: 'line',
data: this.changeData(potentialCustomersArr),
smooth: true,
symbolSize: 0,
itemStyle: {
normal: {
color: "#E43A3C",
}
},
yAxisIndex: 1 // 与第二个 Y 轴关联
},
{
name: '点击率',
type: 'line',
data: this.changeData(clickRateArr),
smooth: true,
symbolSize: 0,
itemStyle: {
normal: {
color: "#26C6DA",
}
},
yAxisIndex: 0 // 与第一个 Y 轴关联
},
{
name: '转化率',
type: 'line',
data: this.changeData(conversionRateArr),
smooth: true,
symbolSize: 0,
itemStyle: {
normal: {
color: "#1E88E5",
}
},
yAxisIndex: 0 // 与第一个 Y 轴关联
}
];