<template>
<div :class="className" :style="{height:height,width:width}">
<div class="tc">
<img width="200" :src="loading_img" />
</div>
</div>
</template>
<script>
import loading_img from '@/assets/img/form-loading.gif'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
// import resize from './mixins/resize'
import resize from '@/components/Chart/mixins/resize'
export default {
mixins: [resize],
props: {
perYear:{
type: Boolean,
default: false,
},
loading:{
type: Boolean,
default: true,
},
noLine:{
type: Boolean,
default: true,
},
className: {
type: String,
default: 'chart'
},
echartParam: {
type: Object,
default: {color:[]}
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '240px'
},
chartData: {
type: Object,
required: true
},
},
data() {
return {
loading_img:loading_img,
chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.initChart()
}
}
},
mounted() {
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
echartClick() {
this.initChart()
},
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
},
setOptions({ xAxis_data,legend_data,series_data } = {}) {
if(this.loading){
this.chart.showLoading()
}else{
this.chart.hideLoading()
}
this.chart.clear();
if(typeof series_data === 'undefined'){
return
}
this.chart.setOption({
xAxis: {
data: xAxis_data[0].data,
// data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12'],
boundaryGap: false,
axisTick: {
show: false
},
axisLabel:{
textStyle:
{color: '#999'},
showMaxLabel: true,
},
axisLine:{
lineStyle:{ color:'#ccc' }
}
},
color:this.echartParam.color,
grid: {
left: '50',
right: '50',
bottom: 30,
top: 55,
containLabel: false
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(000,000,000,0.6)',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
type: 'value',
axisLabel:{
rotate:[45]
}
},
legend:legend_data,
series: series_data
});
}
}
}
</script>
<template>
<el-dialog :visible.sync="dialogVisible" class="dialogWrap" :before-close="handleClose" :close-on-click-modal="false">
<div slot="title" class="slotTitle">
<span>关键词：{{rowDialog.keyword}}</span>
</div>
<div class="chooseYear">
<span>分年显示</span>
<el-switch v-model="perYear"></el-switch>
</div>
<!-- 关键词广告趋势-->
<div class="log-content">
<div class="right-side" v-loading="chartLoading">
<trend-chart
:chart-data="chartData3"
:perYear="perYear"
ref="mychart1"
class="echart-box"
height='318px'
:echart-param="echartParam3"
:loading="loading"
/>
</div>
</div>
</el-dialog>
</template>
<script>
import trendChart from './trendChart'
import { cpc_api } from "@/api/cpc/recommendedKeywords/index";
export default {
components: {
trendChart
},
props: {
dialogVisible:{
type:Boolean,
default: true
},
accountTotal:{
type:Object,
default: {}
},
searchData1:{
type:Object,
default: {}
},
},
data(){
return{
echartParam3: { color: ["#27B8D0", "#FA8C16"] },
pageData: {
page: 1,
size: 10,
total: 0,
sizes: [10, 20, 50]
},
perYear:false,
selectList:{},
tagkeys1:[],//"cpc_exposure", "cpc_click_number"
tagkeys:[],
saveArr1:[],
chartLoading: false,
chartData3:{},
select_value: '',
select_value2: '',
isShow:'true',
isTargetSelsct:[],
topTargetArr:[],
select_id:'',
select_id2:'',
select_value:'',
radio:'1',
targetData:[],
selectData:[],
loading:false,
rowDialog:{}
}
},
watch: {
perYear: {
deep: true,
handler(val) {
this.getMesgInfo()
}
}
},
created() {
},
methods: {
toSplit(value){
let value1 = value.toString()
var str1 = value1.substring(0,4)
var str2 = value1.substr(4,2)
return str1 + '-' + str2
},
handleClose(){
this.$emit("click", false)
},
getAjax(row){
this.rowDialog=row
this.getMesgInfo()
},
// 折线图展示
getMesgInfo() {
this.loading =true
let params={
keyword_id: this.rowDialog.id || this.rowDialog.keyword_id,
related_id: this.rowDialog.related_id,
...this.$AdSearchDateData
};
cpc_api.get_search_trend_list(params).then(res => {
this.loading = false;
let chartData1,chartData2
if(res.code==200 && res.data){
// let seriesData = res.data.series;
let seriesData = res.data.list
if(this.perYear == false){
chartData1 = seriesData.map((item)=>{
return item.searches
})
chartData2 = seriesData.map((item)=>{
return this.toSplit(item.month)
})
res.data.series = [{
data: chartData1,
name: '搜索量',
type: "line"
}];
res.data.xAxis_data = [{
data: chartData2,
name: '',
type: "line"
}];
}
else{
let seriesData = res.data.list_year
//把数据按年进行拆分
let chartData4 = seriesData.map((item)=>(item.year_num).toString())
seriesData.forEach((item)=>{
if(item.year_num){
item.type= 'line'
item.name = (item.year_num).toString()
delete item.year_num
}
}
)
res.data.xAxis_data = [{
type: "category",
data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11','12']
}];
res.data.legend_data = [{
data: chartData4,
// top: '4%',
// left: '2.5%',
// icon: "rect",
}];
res.data.series = seriesData
}
this.$set(this.chartData3, 'xAxis_data', res.data.xAxis_data);
this.$set(this.chartData3, 'legend_data', res.data.legend_data);
this.$set(this.chartData3, 'series_data', res.data.series);
this.$refs.mychart1.echartClick();
}
});
},
}
}
</script>
<style lang='scss' scoped>
.chooseYear{
margin-left: 84%;
}
.dialogWrap{
/deep/.el-dialog{
width: 962px !important;
height: 394px !important;
min-height: 394px !important;
margin-top: 0vh !important;
.slotTitle{
span{
font-size: 16px;
font-weight: 500;
color: #333333;
}
}
}
>>>.el-dialog__header{
display: flex;
align-items: center;
box-sizing: border-box;
border-bottom: none;
.el-dialog__headerbtn{
top: 25px;
}
}
>>> .el-dialog__body{
padding:0px 0px 24px 24px !important;
overflow-y: auto;
}
}
.log-content {
display: flex;
width: 100%;
height: 306px;
.right-side {
width: 100%;
height: 100%;
.echart-box {
width: 100%;
height: 100%;
}
}
.table-class {
font-size: 13px;
width: 100%;
table-layout: auto;
.highlight-left {
border-left: 4px solid #3788fa;
background-color: #ebf3fe;
}
.highlight {
background-color: #ebf3fe !important;
}
th {
color: #666666;
font-weight: bold;
background: #fafafa;
}
th,
td {
padding: 14px 20px;
border: 1px solid #e9e9e9;
}
}
}
</style>
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
