|
|
|
|
@ -103,8 +103,6 @@ |
|
|
|
|
alt=""> |
|
|
|
|
全国农产品地理标志产品登记数 |
|
|
|
|
</div> |
|
|
|
|
<!-- <div id="chart3" |
|
|
|
|
class="chart t_btn9"></div> --> |
|
|
|
|
<div class="main_table"> |
|
|
|
|
<table> |
|
|
|
|
<thead> |
|
|
|
|
@ -318,13 +316,16 @@ export default { |
|
|
|
|
timer1: null, |
|
|
|
|
timer2: null, |
|
|
|
|
list: GeoProducts, |
|
|
|
|
provinces: ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '境外'] |
|
|
|
|
provinces: ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '境外'], |
|
|
|
|
mapChart: null, |
|
|
|
|
chart1: {}, |
|
|
|
|
chart2: {}, |
|
|
|
|
chart5: {}, |
|
|
|
|
chart6: {}, |
|
|
|
|
chart7: {}, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted () { |
|
|
|
|
this.renderChart1() |
|
|
|
|
this.renderChart2() |
|
|
|
|
this.getData() |
|
|
|
|
this.renderMap() |
|
|
|
|
this.scrollTable() |
|
|
|
|
}, |
|
|
|
|
@ -366,138 +367,6 @@ export default { |
|
|
|
|
} |
|
|
|
|
let chart = {} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const data3 = ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '宁夏回族自治区', '青海省', '新疆维吾尔自治区'] |
|
|
|
|
const option3 = { |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
axisPointer: { |
|
|
|
|
type: 'shadow' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
top: '10%', |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: '3%', |
|
|
|
|
right: '4%', |
|
|
|
|
top: '30%', |
|
|
|
|
bottom: '3%', |
|
|
|
|
containLabel: true |
|
|
|
|
}, |
|
|
|
|
dataZoom: [//滑动条 |
|
|
|
|
{ |
|
|
|
|
xAxisIndex: 0,//这里是从X轴的0刻度开始 |
|
|
|
|
show: false,//是否显示滑动条，不影响使用 |
|
|
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 |
|
|
|
|
startValue: 0, // 从头开始。 |
|
|
|
|
endValue: 5 // 一次性展示6个。 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
color: ['#4388ff', '#e9cc7d', '#8c2bff', '#2defe2', '#e59f6f', '#7baaff'], |
|
|
|
|
xAxis: [ |
|
|
|
|
{ |
|
|
|
|
type: 'category', |
|
|
|
|
data: data3, |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
interval: 0, |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#fff', |
|
|
|
|
}, |
|
|
|
|
rotate: 60 |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
yAxis: [ |
|
|
|
|
{ |
|
|
|
|
type: 'value', |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
margin: 10, |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 12, |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
formatter: '{value}个' |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '2016年', |
|
|
|
|
type: 'bar', |
|
|
|
|
stack: 'Ad', |
|
|
|
|
emphasis: { |
|
|
|
|
focus: 'series' |
|
|
|
|
}, |
|
|
|
|
data: ['12', '7', '28', '108', '82', '75', '15', '111', '13', '52', '44', '35', '62', '74', '294', '60', '112', '42', '19', '85', '7', '47', '154', '35', '75', '10', '70', '73', '52', '49', '75'] |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '2017年', |
|
|
|
|
type: 'bar', |
|
|
|
|
stack: 'Ad', |
|
|
|
|
emphasis: { |
|
|
|
|
focus: 'series' |
|
|
|
|
}, |
|
|
|
|
data: ['13', '7', '32', '130', '94', '82', '15', '120', '13', '56', '54', '45', '70', '78', '313', '79', '127', '49', '24', '96', '16', '48', '159', '54', '77', '13', '81', '77', '54', '55', '111'] |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '2018年', |
|
|
|
|
type: 'bar', |
|
|
|
|
stack: 'Ad', |
|
|
|
|
emphasis: { |
|
|
|
|
focus: 'series' |
|
|
|
|
}, |
|
|
|
|
data: ['13', '8', '37', '143', '107', '90', '19', '127', '14', '61', '69', '62', '79', '83', '323', '103', '143', '67', '33', '113', '24', '48', '169', '63', '81', '19', '96', '92', '59', '59', '119'] |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '2019年', |
|
|
|
|
type: 'bar', |
|
|
|
|
stack: 'Ad', |
|
|
|
|
emphasis: { |
|
|
|
|
focus: 'series' |
|
|
|
|
}, |
|
|
|
|
data: ['13', '8', '42', '155', '117', '95', '23', '140', '14', '72', '89', '69', '81', '94', '330', '119', '154', '80', '39', '126', '30', '53', '176', '100', '83', '20', '103', '109', '60', '63', '121'] |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '2020年', |
|
|
|
|
type: 'bar', |
|
|
|
|
stack: 'Ad', |
|
|
|
|
emphasis: { |
|
|
|
|
focus: 'series' |
|
|
|
|
}, |
|
|
|
|
data: ['15', '9', '47', '161', '127', '97', '24', '149', '15', '98', '115', '99', '98', '97', '336', '139', '173', '97', '50', '147', '37', '62', '184', '131', '85', '25', '109', '124', '60', '66', '121'] |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '2021年', |
|
|
|
|
type: 'bar', |
|
|
|
|
stack: 'Ad', |
|
|
|
|
emphasis: { |
|
|
|
|
focus: 'series' |
|
|
|
|
}, |
|
|
|
|
data: ['15', '9', '55', '175', '134', '100', '25', '168', '16', '137', '152', '119', '115', '101', '351', '160', '195', '126', '62', '154', '40', '70', '199', '151', '86', '35', '117', '132', '60', '77', '125'] |
|
|
|
|
}, |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
// chart[3] = echarts.init(document.querySelector(`#chart3`)) |
|
|
|
|
// chart[3].setOption(option3) |
|
|
|
|
// setInterval(function () { |
|
|
|
|
// animateChart(chart[3], option3, data3) |
|
|
|
|
// }, 1500) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const data5 = ['稻米', '小麦', '玉米', '生猪', '家禽', '水产', '中药材', '蔬菜', '茶叶', '林特'] |
|
|
|
|
const option5 = { |
|
|
|
|
tooltip: { |
|
|
|
|
@ -505,7 +374,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: '10%', |
|
|
|
|
right: '5%', |
|
|
|
|
right: '8%', |
|
|
|
|
top: '15%', |
|
|
|
|
bottom: '13%' |
|
|
|
|
}, |
|
|
|
|
@ -562,8 +431,16 @@ export default { |
|
|
|
|
}, { |
|
|
|
|
type: 'value', |
|
|
|
|
name: '增长（%）', |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
interval: 5, |
|
|
|
|
axisLabel: { |
|
|
|
|
margin: 10, |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 12, |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
formatter: '{value} %' |
|
|
|
|
} |
|
|
|
|
}], |
|
|
|
|
@ -599,10 +476,10 @@ export default { |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
chart[5] = echarts.init(document.querySelector(`#chart5`)) |
|
|
|
|
chart[5].setOption(option5) |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[5], option5, data5) |
|
|
|
|
this.chart5 = echarts.init(document.querySelector(`#chart5`)) |
|
|
|
|
this.chart5.setOption(option5) |
|
|
|
|
setInterval(() => { |
|
|
|
|
animateChart(this.chart5, option5, data5) |
|
|
|
|
}, 3000) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -613,7 +490,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: '10%', |
|
|
|
|
right: '5%', |
|
|
|
|
right: '10%', |
|
|
|
|
top: '15%', |
|
|
|
|
bottom: '13%' |
|
|
|
|
}, |
|
|
|
|
@ -670,8 +547,16 @@ export default { |
|
|
|
|
}, { |
|
|
|
|
type: 'value', |
|
|
|
|
name: '产品数（个）', |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
// interval: 5, |
|
|
|
|
axisLabel: { |
|
|
|
|
margin: 10, |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 12, |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
formatter: '{value} 个' |
|
|
|
|
} |
|
|
|
|
}], |
|
|
|
|
@ -703,10 +588,10 @@ export default { |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
chart[6] = echarts.init(document.querySelector(`#chart6`)) |
|
|
|
|
chart[6].setOption(option6) |
|
|
|
|
setInterval(function () { |
|
|
|
|
animateChart(chart[6], option6, data6) |
|
|
|
|
this.chart6 = echarts.init(document.querySelector(`#chart6`)) |
|
|
|
|
this.chart6.setOption(option6) |
|
|
|
|
setInterval(() => { |
|
|
|
|
animateChart(this.chart6, option6, data6) |
|
|
|
|
}, 3000) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -752,8 +637,9 @@ export default { |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
chart[7] = echarts.init(document.querySelector(`#chart7`)) |
|
|
|
|
chart[7].setOption(option7) |
|
|
|
|
this.chart7 = echarts.init(document.querySelector(`#chart7`)) |
|
|
|
|
this.chart7.setOption(option7) |
|
|
|
|
this.renderChart1() |
|
|
|
|
}, |
|
|
|
|
// 获取文本表格数据 |
|
|
|
|
getList () { |
|
|
|
|
@ -1074,11 +960,12 @@ export default { |
|
|
|
|
}, |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
const chart = echarts.init(document.querySelector(`#chart1`)) |
|
|
|
|
chart.setOption(option1) |
|
|
|
|
this.chart1 = echarts.init(document.querySelector(`#chart1`)) |
|
|
|
|
this.chart1.setOption(option1) |
|
|
|
|
this.renderChart2() |
|
|
|
|
clearInterval(this.timer1) |
|
|
|
|
this.timer1 = setInterval(() => { |
|
|
|
|
this.animateChart(chart, option1, this.provinces) |
|
|
|
|
this.animateChart(this.chart1, option1, this.provinces) |
|
|
|
|
}, 1500) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
@ -1354,11 +1241,12 @@ export default { |
|
|
|
|
}, |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
const chart = echarts.init(document.querySelector(`#chart2`)) |
|
|
|
|
chart.setOption(option1) |
|
|
|
|
this.chart2 = echarts.init(document.querySelector(`#chart2`)) |
|
|
|
|
this.chart2.setOption(option1) |
|
|
|
|
this.handleResize() |
|
|
|
|
clearInterval(this.timer2) |
|
|
|
|
this.timer2 = setInterval(() => { |
|
|
|
|
this.animateChart(chart, option1, this.provinces) |
|
|
|
|
this.animateChart(this.chart2, option1, this.provinces) |
|
|
|
|
}, 1500) |
|
|
|
|
}, |
|
|
|
|
// 动画 |
|
|
|
|
@ -1442,7 +1330,7 @@ export default { |
|
|
|
|
// 使用函数模板 传入的数据值 -> value: number | Array |
|
|
|
|
formatter: function (val) { |
|
|
|
|
const { data } = val |
|
|
|
|
return data ? (data.name + '（亿元）:' + data.value) : '' |
|
|
|
|
return data ? (data.name + '：' + data.value) : '' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
@ -1507,11 +1395,13 @@ export default { |
|
|
|
|
}, |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
const chart = echarts.init(document.querySelector(`#chart4`)) |
|
|
|
|
chart.setOption(option) |
|
|
|
|
this.mapChart = echarts.init(document.querySelector(`#chart4`)) |
|
|
|
|
this.mapChart.setOption(option) |
|
|
|
|
|
|
|
|
|
this.getData() |
|
|
|
|
let index = -1 |
|
|
|
|
const len = 15 |
|
|
|
|
const chart = this.mapChart |
|
|
|
|
setInterval(function () { |
|
|
|
|
// 隐藏提示框 |
|
|
|
|
chart.dispatchAction({ |
|
|
|
|
@ -1553,6 +1443,19 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, 2000) |
|
|
|
|
}, |
|
|
|
|
resizeFn () { |
|
|
|
|
this.mapChart && this.mapChart.resize() |
|
|
|
|
this.chart1.resize() |
|
|
|
|
this.chart2.resize() |
|
|
|
|
this.chart5.resize() |
|
|
|
|
this.chart6.resize() |
|
|
|
|
this.chart7.resize() |
|
|
|
|
}, |
|
|
|
|
handleResize () { |
|
|
|
|
window.removeEventListener('rezie', this.resizeFn) |
|
|
|
|
// 监听resize事件，动态改变chart大小 |
|
|
|
|
window.addEventListener('resize', this.resizeFn) |
|
|
|
|
}, |
|
|
|
|
// 表格滚动效果 |
|
|
|
|
scrollTable () { |
|
|
|
|
const dom = this.$refs.geo |
|
|
|
|
|
