|
@@ -118,7 +118,7 @@
|
|
|
<LineChart v-if = "chartData.chartType == 'line'" :chart-data="chartData" />
|
|
|
<HorizontalBarChart v-if = "chartData.chartType == 'horizontal_bar'" :chart-data="chartData" />
|
|
|
<PieChart v-if = "chartData.chartType == 'pie'" :chart-data="chartData" />
|
|
|
-
|
|
|
+ <LineBarChart v-if = "chartData.chartType == 'line_bar'" :chart-data="chartData" />
|
|
|
|
|
|
<!-- <div id="chartLine" style="width:100%;height:385px;" >
|
|
|
|
|
@@ -165,7 +165,7 @@ import LineChart from '@/componentChart/LineChart.vue'
|
|
|
import BarChart from '@/componentChart/BarChart.vue'
|
|
|
import HorizontalBarChart from '@/componentChart/HorizontalBarChart.vue'
|
|
|
import PieChart from '@/componentChart/PieChart.vue'
|
|
|
-
|
|
|
+import LineBarChart from '@/componentChart/LineBarChart.vue'
|
|
|
|
|
|
require('echarts/theme/macarons')
|
|
|
import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, checkButtons } from '@/api/common'
|
|
@@ -174,7 +174,7 @@ import Pagination from '@/components/Pagination'
|
|
|
import { MessageBox } from 'element-ui'
|
|
|
export default {
|
|
|
name: 'ChartPanel2',
|
|
|
- components: { Pagination, draggable , ChartTable ,LineChart,BarChart ,HorizontalBarChart, PieChart},
|
|
|
+ components: { Pagination, draggable , ChartTable ,LineChart,BarChart ,HorizontalBarChart, PieChart, LineBarChart},
|
|
|
data() {
|
|
|
return {
|
|
|
|
|
@@ -800,303 +800,7 @@ export default {
|
|
|
this.getList()
|
|
|
},
|
|
|
|
|
|
-
|
|
|
-
|
|
|
- roadChartLine(chartLine_data) {
|
|
|
- console.log(1111111111)
|
|
|
- if (this.chartLine != null) {
|
|
|
- this.chartLine.dispose()
|
|
|
- }
|
|
|
- this.chartLine = echarts.init(document.getElementById('chartLine'))
|
|
|
- var option_line = {
|
|
|
- title: { text: 'Stacked Line' },
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
- legend: { data:chartLine_data.legendArr, right: 10, show: true, type: 'scroll' },
|
|
|
- grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
|
|
|
- xAxis: [{ type: 'category',data:chartLine_data.xAxisArr }],
|
|
|
- yAxis: [
|
|
|
- {type: 'value', name: 'kg'},
|
|
|
-
|
|
|
- ],
|
|
|
- series: function (e) {
|
|
|
- var serie = [];
|
|
|
- for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
|
|
|
- console.log(i)
|
|
|
-
|
|
|
- var item = {
|
|
|
- name: chartLine_data.legendArr[i],
|
|
|
- data: chartLine_data.dataArr[i],
|
|
|
- type: 'line',
|
|
|
- emphasis: { label: { show: true, position: 'inside' } },
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- serie.push(item);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- console.log(serie)
|
|
|
-
|
|
|
- return serie;
|
|
|
- }()
|
|
|
- // series: [
|
|
|
- // {
|
|
|
- // name: 'Email',
|
|
|
- // type: 'line',
|
|
|
- // stack: 'Total',
|
|
|
- // data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: 'Union Ads',
|
|
|
- // type: 'line',
|
|
|
- // stack: 'Total',
|
|
|
- // data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: 'Video Ads',
|
|
|
- // type: 'line',
|
|
|
- // stack: 'Total',
|
|
|
- // data: [150, 232, 201, 154, 190, 330, 410]
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: 'Direct',
|
|
|
- // type: 'line',
|
|
|
- // stack: 'Total',
|
|
|
- // data: [320, 332, 301, 334, 390, 330, 320]
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: 'Search Engine',
|
|
|
- // type: 'line',
|
|
|
- // stack: 'Total',
|
|
|
- // data: [820, 932, 901, 934, 1290, 1330, 1320]
|
|
|
- // }
|
|
|
- // ]
|
|
|
- }
|
|
|
- var option_bar = {
|
|
|
- title: { text: 'Stacked Line' },
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
- legend: { data:chartLine_data.legendArr, right: 10, show: true, type: 'scroll' },
|
|
|
- grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
|
|
|
- xAxis: [{ type: 'category',data:chartLine_data.xAxisArr }],
|
|
|
- yAxis: [
|
|
|
- {type: 'value', name: 'kg'},
|
|
|
-
|
|
|
- ],
|
|
|
- series: function (e) {
|
|
|
- var serie = [];
|
|
|
- for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
|
|
|
- console.log(i)
|
|
|
-
|
|
|
- var item = {
|
|
|
- name: chartLine_data.legendArr[i],
|
|
|
- data: chartLine_data.dataArr[i],
|
|
|
- type: 'bar',
|
|
|
- emphasis: { label: { show: true, position: 'inside' } },
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- serie.push(item);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- console.log(serie)
|
|
|
-
|
|
|
- return serie;
|
|
|
- }()
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- var option_horizontal_bar = {
|
|
|
- title: { text: 'Stacked Line' },
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
- legend: { data:chartLine_data.legendArr, right: 10, show: true, type: 'scroll' },
|
|
|
- grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
|
|
|
- xAxis: {type: 'value', name: 'kg'},
|
|
|
- yAxis: [
|
|
|
- { type: 'category',data:chartLine_data.xAxisArr }
|
|
|
-
|
|
|
- ],
|
|
|
- series: function (e) {
|
|
|
- var serie = [];
|
|
|
- for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
|
|
|
- console.log(i)
|
|
|
-
|
|
|
- var item = {
|
|
|
- name: chartLine_data.legendArr[i],
|
|
|
- data: chartLine_data.dataArr[i],
|
|
|
- type: 'bar',
|
|
|
- emphasis: { label: { show: true, position: 'inside' } },
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- serie.push(item);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- console.log(serie)
|
|
|
-
|
|
|
- return serie;
|
|
|
- }()
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- var option_pie = {
|
|
|
- title: { text: 'Stacked Line' },
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
- legend: { data:chartLine_data.legendArr, right: 10, show: true, },
|
|
|
- grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
|
|
|
- xAxis: [{ type: 'category',data:chartLine_data.xAxisArr }],
|
|
|
- yAxis: [
|
|
|
- {type: 'value', name: 'kg'},
|
|
|
-
|
|
|
- ],
|
|
|
- series: function (e) {
|
|
|
- var serie = [
|
|
|
- {
|
|
|
- name: 'Access From',
|
|
|
- type: 'pie',
|
|
|
- radius: '50%',
|
|
|
- data: [
|
|
|
- // { value: 1048, name: 'Search Engine' },
|
|
|
- // { value: 735, name: 'Direct' },
|
|
|
- // { value: 580, name: 'Email' },
|
|
|
- // { value: 484, name: 'Union Ads' },
|
|
|
- // { value: 300, name: 'Video Ads' }
|
|
|
- ],
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- ];
|
|
|
- for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
|
|
|
- console.log(i)
|
|
|
-
|
|
|
- var item = {
|
|
|
- name: chartLine_data.legendArr[i],
|
|
|
- value: chartLine_data.dataArr[i],
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- serie[0].data.push(item);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- console.log(serie)
|
|
|
-
|
|
|
- return serie;
|
|
|
- }()
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- var option_line_bar = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'cross',
|
|
|
- crossStyle: {
|
|
|
- color: '#999'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {
|
|
|
- dataView: { show: true, readOnly: false },
|
|
|
- magicType: { show: true, type: ['line', 'bar'] },
|
|
|
- restore: { show: true },
|
|
|
- saveAsImage: { show: true }
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['Evaporation', 'Precipitation', 'Temperature']
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: 'Precipitation',
|
|
|
- min: 0,
|
|
|
- max: 250,
|
|
|
- interval: 50,
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value} ml'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: 'Temperature',
|
|
|
- min: 0,
|
|
|
- max: 25,
|
|
|
- interval: 5,
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value} °C'
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'Evaporation',
|
|
|
- type: 'bar',
|
|
|
- data: [
|
|
|
- 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Precipitation',
|
|
|
- type: 'bar',
|
|
|
- data: [
|
|
|
- 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'Temperature',
|
|
|
- type: 'line',
|
|
|
- yAxisIndex: 1,
|
|
|
- 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]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- if(chartLine_data.chartType == 'line'){
|
|
|
- this.chartLine.setOption(option_line)
|
|
|
- } else if(chartLine_data.chartType == 'bar'){
|
|
|
- this.chartLine.setOption(option_bar)
|
|
|
- } else if(chartLine_data.chartType == 'horizontal_bar'){
|
|
|
- this.chartLine.setOption(option_horizontal_bar)
|
|
|
- } else if(chartLine_data.chartType == 'pie'){
|
|
|
- this.chartLine.setOption(option_pie)
|
|
|
- } else if(chartLine_data.chartType == 'line_bar'){
|
|
|
- this.chartLine.setOption(option_line_bar)
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- window.onresize = function() {
|
|
|
- this.chartLine.resize()
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
+
|
|
|
//切换图表类型
|
|
|
switch_chart_type(item){
|
|
|
console.log(item)
|
|
@@ -1159,6 +863,25 @@ export default {
|
|
|
legendArr: ['数据1', '数据2', '数据3', '数据4', '线条1'],
|
|
|
dataArr:[1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
|
|
|
|
|
|
+ }
|
|
|
+ } else if (item.type == 'line_bar'){
|
|
|
+ console.log("pie!=============")
|
|
|
+ this.chartData = {
|
|
|
+ chartType:'line_bar',
|
|
|
+ xAxisArr: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
|
|
|
+ legendArr1: ['数据1', '数据2', '数据3', '数据4' ],
|
|
|
+ dataArr1:[
|
|
|
+ [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
|
|
|
+ [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
|
|
|
+ [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
|
|
|
+ [2, 10, 3, 2, 10, 4, 4, 9, 3, 9, 3, 8],
|
|
|
+ ],
|
|
|
+ legendArr2: ['数据5', '线条1'],
|
|
|
+ dataArr2:[
|
|
|
+ [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
|
|
|
+ [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
|
|
|
+ ]
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|