1.         showCharts() {
    2.             const myChart = echarts.init(this.$refs.box)
    3.             var option
    4.             option = {
    5.                 color: '#2a78f7',
    6.                 tooltip: {
    7.                     trigger: 'axis'
    8.                 },
    9.                 grid: {
    10.                     // left: '3%',
    11.                     // right: '4%',
    12.                     top: '10%',
    13.                     containLabel: true
    14.                 },
    15.                 xAxis: {
    16.                     type: 'category',
    17.                     data: this.dates,
    18.                     axisLine: {
    19.                         show: false // 不显示坐标轴轴线
    20.                     },
    21.                     axisTick: {
    22.                         show: false // 不显示坐标轴刻度
    23.                     },
    24.                     axisLabel: {
    25.                         interval: 1,
    26.                         rotate: -20
    27.                     }
    28.                 },
    29.                 yAxis: {
    30.                     type: 'value',
    31.                     splitLine: {
    32.                         show: false
    33.                     },
    34.                     axisLine: {
    35.                         show: false // 不显示坐标轴轴线
    36.                     },
    37.                     axisTick: {
    38.                         show: false // 不显示坐标轴刻度
    39.                     }
    40.                 },
    41.                 series: [{
    42.                     name: '点击量',
    43.                     data: this.echarts.clickNums,
    44.                     type: 'line',
    45.                     smooth: true,
    46.                     areaStyle: {
    47.                         color: new echarts.graphic.LinearGradient(
    48.                             0, 0, 0, 1,
    49.                             [
    50.                                 { offset: 0, color: '#E8F2FF' }, // 柱图渐变色
    51.                                 // { offset: 0.5, color: '#44C0C1' }, // 柱图渐变色
    52.                                 { offset: 1, color: '#ffffff' } // 柱图渐变色
    53.                             ]
    54.                         )
    55.                     }
    56.                 }]
    57.             }
    58.             myChart.setOption(option, true)
    59.             window.addEventListener('resize', () => {
    60.                 myChart.resize()
    61.             })
    62.         },
    1. showCharts3() {
    2.             const myChart = echarts.init(this.$refs.box3)
    3.             var option
    4.             option = {
    5.                 tooltip: {
    6.                     trigger: 'axis'
    7.                 },
    8.                 color: '#2a78f7',
    9.                 grid: {
    10.                     // left: '3%',
    11.                     // right: '4%',
    12.                     top: '10%',
    13.                     containLabel: true
    14.                 },
    15.                 xAxis: {
    16.                     type: 'category',
    17.                     data: this.dates3,
    18.                     axisLine: {
    19.                         show: false // 不显示坐标轴轴线
    20.                     },
    21.                     axisTick: {
    22.                         show: false // 不显示坐标轴刻度
    23.                     },
    24.                     axisLabel: {
    25.                         interval: 1,
    26.                         rotate: -20
    27.                     }
    28.                 },
    29.                 yAxis: {
    30.                     type: 'value',
    31.                     splitLine: {
    32.                         show: false
    33.                     },
    34.                     axisLine: {
    35.                         show: false // 不显示坐标轴轴线
    36.                     },
    37.                     axisTick: {
    38.                         show: false // 不显示坐标轴刻度
    39.                     }
    40.                 },
    41.                 series: [{
    42.                     name: '价格',
    43.                     data: this.echarts3.prices,
    44.                     type: 'line',
    45.                     // smooth: true,
    46.                     step: 'start',
    47.                     areaStyle: {
    48.                         color: new echarts.graphic.LinearGradient(
    49.                             0, 0, 0, 1,
    50.                             [
    51.                                 { offset: 0, color: '#E8F2FF' }, // 柱图渐变色
    52.                                 // { offset: 0.5, color: '#44C0C1' }, // 柱图渐变色
    53.                                 { offset: 1, color: '#ffffff' } // 柱图渐变色
    54.                             ]
    55.                         )
    56.                     }
    57.                 }]
    58.             }
    59.             myChart.setOption(option, true)
    60.             window.addEventListener('resize', () => {
    61.                 myChart.resize()
    62.             })
    63.         },
    1. showCharts2() {
    2.             const myChart = echarts.init(this.$refs.box2)
    3.             var option
    4.             option = {
    5.                 tooltip: {
    6.                     trigger: 'item'
    7.                 },
    8.                 legend: {
    9.                     // top: -20,
    10.                     orient: 'vertical',
    11.                     // left: 'center',
    12.                     right: 'right',
    13.                     data: ['市场同款', '相似商品', '当前商品']
    14.                 },
    15.                 color: ['#ff7700', '#FFD700', '#2a78f7'],
    16.                 radar: {
    17.                     // shape: 'circle',
    18.                     splitNumber: 3, // 雷达图圈数设置
    19.                     indicator: [
    20.                         { name: '流量', color: '#222222', max: 100 },
    21.                         { name: '库存', color: '#222222', max: 100 },
    22.                         { name: '毛利', color: '#222222', max: 100 },
    23.                         { name: '销售', color: '#222222', max: 100 },
    24.                         { name: '价格', color: '#222222', max: 100 }
    25.                     ],
    26.                     splitArea: {
    27.                         show: false,
    28.                         areaStyle: {
    29.                             color: 'rgba(255,0,0,0)' // 图表背景的颜色
    30.                         }
    31.                     }
    33.                 },
    34.                 series: [{
    35.                     // name: '预算 vs 开销（Budget vs spending）',
    36.                     type: 'radar',
    37.                     data: [
    38.                         {
    39.                             value: this.echarts2.marketDimension,
    40.                             name: '市场同款'
    41.                         },
    42.                         {
    43.                             value: this.echarts2.similarCommodityDimension,
    44.                             name: '相似商品'
    45.                         },
    46.                         {
    47.                             value: this.echarts2.businessDimension,
    48.                             name: '当前商品'
    49.                         }
    50.                     ]
    51.                 }]
    52.             }
    53.             myChart.setOption(option, true)
    54.             window.addEventListener('resize', () => {
    55.                 myChart.resize()
    56.             })
    57.         },
    1. showCharts4() {
    2.             const myChart = echarts.init(this.$refs.box4)
    3.             var option
    4.             option = {
    5.                 tooltip: {
    6.                     trigger: 'axis'
    7.                 },
    8.                 legend: {
    9.                     selectedMode: false,
    10.                     left: '8%',
    11.                     data: ['销售金额'],
    12.                     icon: 'pie'
    13.                 },
    14.                 color: ['#2a78f7', '#2a78f7'],
    15.                 grid: {
    16.                     left: '3%',
    17.                     right: '4%',
    18.                     bottom: '3%',
    19.                     containLabel: true
    20.                 },
    21.                 xAxis: {
    22.                     type: 'category',
    23.                     boundaryGap: false,
    24.                     data: this.dates4,
    25.                     axisLine: {
    26.                         show: false // 不显示坐标轴轴线
    27.                     },
    28.                     axisTick: {
    29.                         show: false // 不显示坐标轴刻度
    30.                     },
    31.                     axisLabel: {
    32.                         interval: 1
    33.                         // rotate: -20
    34.                     }
    35.                 },
    36.                 yAxis: {
    37.                     type: 'value',
    38.                     splitLine: {
    39.                         show: false
    40.                     },
    41.                     axisLine: {
    42.                         show: false // 不显示坐标轴轴线
    43.                     },
    44.                     axisTick: {
    45.                         show: false // 不显示坐标轴刻度
    46.                     }
    47.                 },
    48.                 visualMap: {
    49.                     show: false,
    50.                     dimension: 0,
    51.                     pieces: [{
    52.                         lte: this.index,
    53.                         color: 'rgba(42,120,247, 1)'
    54.                     }, {
    55.                         gt: this.index,
    56.                         lte: 22,
    57.                         color: 'rgba(42,120,247, 0.5)'
    58.                     }]
    59.                 },
    60.                 series: [{
    61.                     name: '销售金额',
    62.                     type: 'line',
    63.                     // stack: '总量',
    64.                     smooth: true,
    65.                     data: this.echarts4.amounts,
    66.                     markArea: {
    67.                         itemStyle: {
    68.                             color: 'rgba(42,120,247, 0.1)'
    69.                         },
    70.                         data: [[{
    71.                             name: '预测趋势',
    72.                             xAxis: this.currentdate
    73.                         }, {
    74.                             xAxis: this.dates4[this.dates4.length]
    75.                         }]]
    76.                     }
    77.                 }
    78.                 ]
    79.             }
    80.             myChart.setOption(option, true)
    81.             window.addEventListener('resize', () => {
    82.                 myChart.resize()
    83.             })
    84.         },
    1. showCharts(obj) {
    2.             const myChart = echarts.init(this.$refs.box)
    3.             var option
    4.             const _this = this
    5.             option = {
    6.                 // tooltip: {
    7.                 //     trigger: 'axis',
    8.                 //     axisPointer: {
    9.                 //         type: 'shadow'
    10.                 //     }
    11.                 // },
    12.                 tooltip: {
    13.                     trigger: 'axis',
    14.                     axisPointer: {
    15.                         type: 'shadow'
    16.                     },
    17.                     formatter: function(item) {
    18.                         var relVal = item[0].axisValue + '<br/>' + '总量库存：' + obj.totalStock[item[0].dataIndex]
    19.                         for (var i = 0, l = item.length; i < l; i++) {
    20.                             relVal += '<br/>' + item[i].seriesName + '：' + item[i].value
    21.                         }
    22.                         return relVal
    23.                     }
    24.                 },
    25.                 legend: {
    26.                     // selectedMode: false,
    27.                     // x: 'right',
    28.                     y: 'top',
    29.                     right: '2%',
    30.                     // top: -10,
    31.                     data: ['可卖库存', '占用库存']
    32.                 },
    33.                 color: ['#4A80FF', '#FF9F28'],
    34.                 grid: {
    35.                     left: '3%',
    36.                     right: '2%',
    37.                     bottom: '22%',
    38.                     top: '8%',
    39.                     containLabel: true
    40.                 },
    41.                 dataZoom: obj.availableStock.length > 15 ? {
    42.                     left: '6%',
    43.                     right: '2%',
    44.                     bottom: '33%',
    45.                     // top: '8%',
    46.                     show: obj.availableStock.length > 15, // 为true 滚动条出现
    47.                     realtime: true,
    48.                     type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
    49.                     height: 12, // 表示滚动条的高度，也就是粗细
    50.                     // start: 0, // 表示默认展示20%～80%这一段。
    51.                     // end: 80,
    52.                     startValue: 0, // 数据窗口范围的起始数值
    53.                     endValue: 14 // 数据窗口范围的结束数值。
    54.                 } : { show: obj.availableStock.length > 15 },
    55.                 xAxis: [{
    56.                     type: 'category',
    57.                     data: obj.warehouseName,
    58.                     axisLine: {
    59.                         show: false // 不显示坐标轴轴线
    60.                     },
    61.                     axisTick: {
    62.                         show: false // 不显示坐标轴刻度
    63.                     },
    64.                     axisLabel: {
    65.                         interval: 0, // 强制所有标签显示
    66.                         margin: 20,
    67.                         rotate: 10,
    68.                         clickable: true
    69.                     },
    70.                     silent: false,
    71.                     triggerEvent: true
    72.                 }],
    73.                 yAxis: [{
    74.                     type: 'value',
    75.                     splitLine: {
    76.                         show: false
    77.                     },
    78.                     axisLine: {
    79.                         show: false // 不显示坐标轴轴线
    80.                     },
    81.                     axisTick: {
    82.                         show: false // 不显示坐标轴刻度
    83.                     }
    84.                 }],
    85.                 series: [{
    86.                     name: '可卖库存',
    87.                     barMaxWidth: 50,
    88.                     type: 'bar',
    89.                     stack: 'Ad',
    90.                     emphasis: {
    91.                         focus: 'series'
    92.                     },
    93.                     data: obj.availableStock
    94.                 },
    95.                 {
    96.                     name: '占用库存',
    97.                     barMaxWidth: 50,
    98.                     type: 'bar',
    99.                     stack: 'Ad',
    100.                     emphasis: {
    101.                         focus: 'series'
    102.                     },
    103.                     data: obj.occupyStock
    104.                 }
    105.                 ]
    106.             }
    107.             myChart.setOption(option, true)
    108.             // myChart.on('click', 'xAxis.category', function(params) {
    109.             //     _this.succeedVisible = true
    110.             //     _this.title = params.name + '近15天数据情况'
    111.             //     _this.selectInDetails(obj.warehouseCode[params.dataIndex])
    112.             // })
    113.             myChart.on('click', function(params) {
    114.                 console.log(params)
    115.                 // console.log(params.dataIndex)
    116.                 // console.log(_this.succeedVisible)
    117.                 _this.succeedVisible = true
    118.                 if (params.componentType === 'series') {
    119.                     _this.title = params.name + '近15天数据情况'
    120.                     _this.selectInDetails(obj.warehouseCode[params.dataIndex])
    121.                 } else {
    122.                     _this.title = params.value + '近15天数据情况'
    123.                     console.log(obj.warehouseCode)
    124.                     var i
    125.                     obj.warehouseName.map((item, index) => {
    126.                         if (item === params.value) {
    127.                             i = index
    128.                         }
    129.                     })
    130.                     // console.log(i)
    131.                     _this.selectInDetails(obj.warehouseCode[i])
    132.                 }
    133.                 // console.log(obj.warehouseCode[params.dataIndex])
    134.             })
    135.             window.addEventListener('resize', () => {
    136.                 myChart.resize()
    137.             })
    138.         },
    1.  showCharts2(obj) {
    2.             const myChart = echarts.init(this.$refs.box2)
    3.             var option
    4.             option = {
    5.                 tooltip: {
    6.                     trigger: 'axis',
    7.                     axisPointer: {
    8.                         type: 'shadow'
    9.                     }
    10.                 },
    11.                 color: ['#4A80FF', '#FF9F28'],
    12.                 grid: {
    13.                     left: '3%',
    14.                     right: '2%',
    15.                     bottom: '20%',
    16.                     top: '8%',
    17.                     containLabel: true
    18.                 },
    19.                 legend: {
    20.                     y: 'top',
    21.                     right: '2%',
    22.                     data: ['可卖库存', '变动库存']
    23.                 },
    24.                 xAxis: [{
    25.                     type: 'category',
    26.                     data: obj.clickDate,
    27.                     // axisPointer: {
    28.                     //     type: 'shadow'
    29.                     // }
    30.                     axisLine: {
    31.                         show: false, // 不显示坐标轴轴线
    32.                         onZero: true
    33.                     },
    34.                     axisTick: {
    35.                         show: false // 不显示坐标轴刻度
    36.                     },
    37.                     axisLabel: {
    38.                         // interval: 0,
    39.                         // margin: -180,
    40.                         rotate: 40
    41.                     },
    42.                     margin: -200
    43.                 }],
    44.                 yAxis: [{
    45.                     type: 'value',
    46.                     splitLine: {
    47.                         show: false
    48.                     },
    49.                     axisLine: {
    50.                         show: false // 不显示坐标轴轴线
    51.                     },
    52.                     axisTick: {
    53.                         show: false // 不显示坐标轴刻度
    54.                     }
    55.                 }
    56.                 ],
    57.                 series: [{
    58.                     name: '可卖库存',
    59.                     barMaxWidth: 15,
    60.                     type: 'bar',
    61.                     data: obj.availableStock
    62.                 },
    63.                 {
    64.                     name: '变动库存',
    65.                     type: 'line',
    66.                     data: obj.changeStock
    67.                 }
    68.                 ]
    69.             }
    70.             myChart.setOption(option, true)
    71.             window.addEventListener('resize', () => {
    72.                 myChart.resize()
    73.             })
    74.         },
    1. showCharts1(obj) {
    2.             const myChart = echarts.init(this.$refs.box1)
    3.             var option
    4.             option = {
    5.                 title: {
    6.                     text: '*超期指数：指根据商品库存、销量、变动情况进行模型计算，指数越高，超期越严重。',
    7.                     textStyle: {
    8.                         color: '#666666',
    9.                         fontSize: 12,
    10.                         lineHeight: 14
    11.                     },
    12.                     top: '78%',
    13.                     left: 'center'
    14.                 },
    15.                 tooltip: {
    16.                     trigger: 'axis',
    17.                     textStyle: {
    18.                         width: 160,
    19.                         overflow: 'break'
    20.                     },
    21.                     extraCssText: 'width:300px; white-space:normal;word-break: normal;'
    22.                 },
    23.                 color: ['#4A80FF', '#35CA67', '#FF9F28'],
    24.                 grid: {
    25.                     left: '3%',
    26.                     right: '2%',
    27.                     bottom: '22%',
    28.                     top: '8%',
    29.                     containLabel: true
    30.                 },
    31.                 legend: {
    32.                     y: 'top',
    33.                     right: '2%',
    34.                     data: ['可卖库存', '变动库存', '超期指数']
    35.                 },
    36.                 xAxis: [{
    37.                     type: 'category',
    38.                     data: obj.itemName,
    39.                     // axisPointer: {
    40.                     //     type: 'shadow'
    41.                     // }
    42.                     axisLine: {
    43.                         show: false // 不显示坐标轴轴线
    44.                     },
    45.                     axisTick: {
    46.                         show: false // 不显示坐标轴刻度
    47.                     },
    48.                     axisLabel: {
    49.                         show: true,
    50.                         interval: 0, // 强制所有标签显示
    51.                         margin: 10, // 标签向右移动 如果yAxis 跟 xAxis换了,这个margin应该调为0才能看见标签显示
    52.                         formatter: function(params) { // 标签输出形式 ---请开始你的表演
    53.                             var index = 5
    54.                             var newstr = ''
    55.                             for (var i = 0; i < params.length; i += index) {
    56.                                 var tmp = params.substring(i, i + index)
    57.                                 newstr += tmp + '\n'
    58.                             }
    59.                             if (newstr.length > 10) {
    60.                                 return newstr.substring(0, 10) + '...'
    61.                             } else {
    62.                                 return newstr
    63.                             }
    64.                         }
    65.                     },
    66.                     triggerEvent: true
    67.                 }],
    68.                 yAxis: [{
    69.                     type: 'value',
    70.                     splitLine: {
    71.                         show: false
    72.                     },
    73.                     axisLine: {
    74.                         show: false // 不显示坐标轴轴线
    75.                     },
    76.                     axisTick: {
    77.                         show: false // 不显示坐标轴刻度
    78.                     }
    79.                 },
    80.                 {
    81.                     type: 'value',
    82.                     // min: 0,
    83.                     // max: 100,
    84.                     scale: true,
    85.                     splitLine: {
    86.                         show: false
    87.                     },
    88.                     axisLine: {
    89.                         show: false // 不显示坐标轴轴线
    90.                     },
    91.                     axisTick: {
    92.                         show: false // 不显示坐标轴刻度
    93.                     }
    94.                 }
    95.                 ],
    96.                 series: [{
    97.                     name: '可卖库存',
    98.                     barMaxWidth: 50,
    99.                     type: 'bar',
    100.                     data: obj.availableStock
    101.                 },
    102.                 {
    103.                     name: '变动库存',
    104.                     barMaxWidth: 50,
    105.                     type: 'bar',
    106.                     data: obj.changeStock
    107.                 },
    108.                 {
    109.                     name: '超期指数',
    110.                     type: 'line',
    111.                     yAxisIndex: 1,
    112.                     data: obj.exceedTimeExponent
    113.                 }
    114.                 ]
    115.             }
    116.             myChart.setOption(option, true)
    117.             window.addEventListener('resize', () => {
    118.                 myChart.resize()
    119.             })
    120.         },
    1.  showCharts() {
    2.             const myChart = echarts.init(this.$refs.box)
    3.             var option
    4.             option = {
    5.                 grid: {
    6.                     left: '50px',
    7.                     // right: '4%',
    8.                     // bottom: '12%',
    9.                     top: '20px'
    10.                 },
    11.                 xAxis: {
    12.                     type: 'category',
    13.                     data: ['本店', '市场'],
    14.                     axisLine: {
    15.                         show: false // 不显示坐标轴轴线
    16.                     },
    17.                     axisTick: {
    18.                         show: false // 不显示坐标轴刻度
    19.                     }
    20.                 },
    21.                 yAxis: {
    22.                     type: 'value',
    23.                     max: 100,
    24.                     axisLabel: {
    25.                         formatter: '{value}%'
    26.                     },
    27.                     axisLine: {
    28.                         show: false // 不显示坐标轴轴线
    29.                     },
    30.                     axisTick: {
    31.                         show: false // 不显示坐标轴刻度
    32.                     },
    33.                     splitLine: {
    34.                         show: false
    35.                     }
    36.                 },
    37.                 series: [{
    38.                     data: [this.echarts.shopProportion, this.echarts.marketProportion],
    39.                     type: 'bar',
    40.                     barWidth: 30,
    41.                     itemStyle: {
    42.                         normal: {
    43.                             label: {
    44.                                 // axisLabel: {
    45.                                 //     formatter: '{value}%'
    46.                                 // },
    47.                                 show: true, // 开启显示
    48.                                 position: 'top', // 在上方显示
    49.                                 textStyle: { // 数值样式
    50.                                     color: 'black',
    51.                                     fontSize: 14
    52.                                 },
    53.                                 formatter: '{c}%'
    54.                             },
    55.                             color: new echarts.graphic.LinearGradient(
    56.                                 0, 0, 0, 1,
    57.                                 [
    58.                                     { offset: 0, color: '#477eff' }, // 柱图渐变色
    59.                                     // { offset: 0.5, color: '#44C0C1' }, // 柱图渐变色
    60.                                     { offset: 1, color: '#dfefff' } // 柱图渐变色
    61.                                 ]
    62.                             )
    63.                         },
    64.                         emphasis: {
    65.                             color: new echarts.graphic.LinearGradient(
    66.                                 0, 0, 0, 1,
    67.                                 [
    68.                                     { offset: 0, color: '#dfefff' }, // 柱图高亮渐变色
    69.                                     // { offset: 0.7, color: '#44C0C1' }, // 柱图高亮渐变色
    70.                                     { offset: 1, color: '#477eff' } // 柱图高亮渐变色
    71.                                 ]
    72.                             )
    73.                         }
    74.                     }
    75.                 }]
    76.             }
    77.             myChart.setOption(option, true)
    78.             window.addEventListener('resize', () => {
    79.                 myChart.resize()
    80.             })
    81.         },
    1. showCharts2() {
    2.             const myChart = echarts.init(this.$refs.box2)
    3.             var option
    4.             option = {
    5.                 tooltip: {
    6.                     trigger: 'axis',
    7.                     formatter: function(item) {
    8.                         var arrgen = ['市场销售', '市场流量']
    9.                         function isCon(arr, val) {
    10.                             for (var i = 0; i < arr.length; i++) {
    11.                                 if (arr[i] === val) { return true }
    12.                             }
    13.                             return false
    14.                         }
    15.                         if (item.length === 1) {
    16.                             if (isCon(arrgen, item[0].seriesName)) {
    17.                                 return ``
    18.                             } else {
    19.                                 return `<div>
    20.                         <div style="color:#ffffff;">${item[0].axisValue}</div>
    21.                       <div style="margin: 0 8px;">
    22.                         <div style="color:#ffffff;margin-left:10px;">${item[0].seriesName}：${item[0].value}</div>
    23.                       </div>
    24.                     </div>`
    25.                             }
    26.                         } else if (item.length === 2) {
    27.                             if (item.every((a, index, array) => isCon(arrgen, a.seriesName))) {
    28.                                 return ``
    29.                             } else {
    30.                                 return `<div>
    31.                         <div style="color:#ffffff;">${item[0].axisValue}</div>
    32.                       <div style="margin: 0 8px;">
    33.                         ${isCon(arrgen, item[0].seriesName) ? `` : `<div style="color:#ffffff;margin-left:10px;">${item[0].seriesName}：${item[0].value}</div>`}
    34.                         ${isCon(arrgen, item[1].seriesName) ? `` : `<div style="color:#ffffff;margin-left:10px;">${item[1].seriesName}：${item[1].value}</div>`}
    35.                       </div>
    36.                     </div>`
    37.                             }
    38.                         } else if (item.length === 3) {
    39.                             return `<div>
    40.                         <div style="color:#ffffff;">${item[0].axisValue}</div>
    41.                       <div style="margin: 0 8px;">
    42.                         ${isCon(arrgen, item[0].seriesName) ? `` : `<div style="color:#ffffff;margin-left:10px;">${item[0].seriesName}：${item[0].value}</div>`}
    43.                         ${isCon(arrgen, item[1].seriesName) ? `` : `<div style="color:#ffffff;margin-left:10px;">${item[1].seriesName}：${item[1].value}</div>`}
    44.                         ${isCon(arrgen, item[2].seriesName) ? `` : `<div style="color:#ffffff;margin-left:10px;">${item[2].seriesName}：${item[2].value}</div>`}
    45.                       </div>
    46.                     </div>`
    47.                         } else if (item.length === 4) {
    48.                             return `<div>
    49.                         <div style="color:#ffffff;">${item[1].axisValue}</div>
    50.                       <div style="margin: 0 8px;">
    51.                         <div style="color:#ffffff;margin-left:10px;">本店销售：${item[1].value}</div>
    52.                         <div style="color:#ffffff;margin-left:10px;">本店流量：${item[3].value}</div>
    53.                       </div>
    54.                     </div>`
    55.                         }
    56.                     }
    57.                 },
    58.                 color: ['#ff7700', '#2a78f7'],
    59.                 legend: {
    60.                     // selectedMode: false,
    61.                     right: '8%',
    62.                     data: ['市场销售', '本店销售', '市场流量', '本店流量']
    63.                 },
    64.                 grid: {
    65.                     left: '50px',
    66.                     right: '4%',
    67.                     // bottom: '12%',
    68.                     top: '25px'
    69.                 },
    70.                 xAxis: {
    71.                     type: 'category',
    72.                     data: this.dates,
    73.                     axisLine: {
    74.                         show: false // 不显示坐标轴轴线
    75.                     },
    76.                     axisTick: {
    77.                         show: false // 不显示坐标轴刻度
    78.                     },
    79.                     axisLabel: {
    80.                         interval: 0,
    81.                         rotate: -20
    82.                     }
    83.                 },
    84.                 yAxis: [{
    85.                     show: false,
    86.                     splitLine: {
    87.                         show: false
    88.                     },
    89.                     type: 'value',
    90.                     axisLine: {
    91.                         show: false // 不显示坐标轴轴线
    92.                     },
    93.                     axisTick: {
    94.                         show: false // 不显示坐标轴刻度
    95.                     }
    96.                 },
    97.                 {
    98.                     type: 'value',
    99.                     show: false,
    100.                     splitLine: {
    101.                         show: false
    102.                     },
    103.                     axisLine: {
    104.                         show: false // 不显示坐标轴轴线
    105.                     },
    106.                     axisTick: {
    107.                         show: false // 不显示坐标轴刻度
    108.                     }
    109.                 }],
    110.                 series: [{
    111.                     name: '市场销售',
    112.                     data: this.echarts2.marketSales,
    113.                     type: 'bar',
    114.                     barWidth: 10
    115.                 },
    116.                 {
    117.                     name: '本店销售',
    118.                     data: this.echarts2.storeSales,
    119.                     type: 'bar',
    120.                     barWidth: 10
    121.                 },
    122.                 {
    123.                     name: '市场流量',
    124.                     type: 'line',
    125.                     yAxisIndex: 1,
    126.                     smooth: true,
    127.                     data: this.echarts2.marketClicks
    128.                 },
    129.                 {
    130.                     name: '本店流量',
    131.                     type: 'line',
    132.                     yAxisIndex: 1,
    133.                     smooth: true,
    134.                     data: this.echarts2.storeClicks
    135.                 }]
    136.             }
    137.             myChart.setOption(option, true)
    138.             window.addEventListener('resize', () => {
    139.                 myChart.resize()
    140.             })
    141.         },
    1. showCharts() {
    2.             const myChart = echarts.init(this.$refs.box)
    3.             var option
    4.             option = {
    5.                 // title: {
    6.                 //     text: '(万元)',
    7.                 //     y: 'center',
    8.                 //     rotate: -90,
    9.                 //     textStyle: { fontWeight: 'normal' }
    10.                 // },
    11.                 //         return `<div>
    12.                 //             <div>${item[0].axisValue}</div>
    13.                 //               <div style="margin: 0 8px;">
    14.                 //                  ${item[1] ? `<div style="color:#ffffff;"><i style="background-color:#ff7700;display: inline-block;height:10px;width:10px;margin-right:8px;border-radius:5px"></i>市场：${item[0].value}（万元）</div>
    15.                 //                  <div style="color:#ffffff;"><i style="background-color:#2a78f7;display: inline-block;height:10px;width:10px;margin-right:8px;border-radius:5px"></i>本店：${item[1].value}（万元）</div> ` : !item[0]
    16.                 // ? '' : item[0].seriesName === '本店' ? `<div style="color:#ffffff;"><i style="background-color:#2a78f7;display: inline-block;height:10px;width:10px;margin-right:8px;border-radius:5px"></i>本店：${item[0].value}（万元）</div>` : `<div style="color:#ffffff;"><i style="background-color:#ff7700;display: inline-block;height:10px;width:10px;margin-right:8px;border-radius:5px"></i>市场：${item[0].value}（万元）</div>`}
    17.                 //               </div>
    18.                 //             </div>`
    19.                 tooltip: {
    20.                     trigger: 'axis',
    21.                     formatter: function(item) {
    22.                         // console.log(item)
    23.                         return item[0].seriesName === '本店' ? `<div>
    24.                     <div>${item[0].axisValue}</div>
    25.                       <div style="margin: 0 8px;">
    26.                           <div style="color:#ffffff;"><i style="background-color:#2a78f7;display: inline-block;height:10px;width:10px;margin-right:8px;border-radius:5px"></i>本店：${item[0].value}（万元）</div>
    27.                       </div>
    28.                     </div>` : ``
    29.                     }
    30.                 },
    31.                 legend: {
    32.                     // selectedMode: false,
    33.                     left: '8%',
    34.                     data: ['市场', '本店'],
    35.                     icon: 'pie'
    36.                 },
    37.                 // color: ['#ff7700', '#2a78f7'],
    38.                 grid: {
    39.                     left: '3%',
    40.                     right: '4%',
    41.                     bottom: '3%',
    42.                     containLabel: true
    43.                 },
    44.                 xAxis: {
    45.                     type: 'category',
    46.                     boundaryGap: false,
    47.                     data: this.chartsa.value,
    48.                     // data: ['2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03'],
    49.                     axisLine: {
    50.                         show: false // 不显示坐标轴轴线
    51.                     },
    52.                     axisTick: {
    53.                         show: false // 不显示坐标轴刻度
    54.                     },
    55.                     axisLabel: {
    56.                         interval: 0,
    57.                         rotate: -10
    58.                     }
    59.                 },
    60.                 yAxis: [{
    61.                     name: '单位：(万元)', // Y轴标题
    62.                     type: 'value',
    63.                     splitNumber: 4,
    64.                     // y: 'center',
    65.                     // axisLabel: { formatter: '{value} %' },
    66.                     splitLine: {
    67.                         show: false
    68.                     },
    69.                     axisLine: {
    70.                         show: false // 不显示坐标轴轴线
    71.                     },
    72.                     axisTick: {
    73.                         show: false // 不显示坐标轴刻度
    74.                     }
    75.                 },
    76.                 {
    77.                     type: 'value',
    78.                     show: false,
    79.                     splitLine: {
    80.                         show: false
    81.                     },
    82.                     axisLine: {
    83.                         show: false // 不显示坐标轴轴线
    84.                     },
    85.                     axisTick: {
    86.                         show: false // 不显示坐标轴刻度
    87.                     }
    88.                 }
    89.                 ],
    90.                 series: [
    92.                     {
    93.                         name: '本店',
    94.                         type: 'line',
    95.                         stack: '总量',
    96.                         smooth: true,
    97.                         color: '#2a78f7',
    98.                         data: this.chartsa.value3
    99.                     },
    100.                     {
    101.                         name: '市场',
    102.                         type: 'line',
    103.                         stack: '总量',
    104.                         yAxisIndex: 1,
    105.                         smooth: true,
    106.                         color: '#ff7700',
    107.                         data: this.chartsa.value2
    108.                     }
    109.                 ]
    110.             }
    111.             myChart.setOption(option, true)
    112.             window.addEventListener('resize', () => {
    113.                 myChart.resize()
    114.             })
    115.         },
    1. showCharts3() {
    2.             const myChart = echarts.init(this.$refs.box)
    3.             var option
    4.             option = {
    5.                 // title: {
    6.                 //     text: '(万元)',
    7.                 //     y: 'center',
    8.                 //     rotate: -90,
    9.                 //     textStyle: { fontWeight: 'normal' }
    10.                 // },
    11.                 tooltip: {
    12.                     trigger: 'axis',
    13.                     formatter: function(item) {
    14.                         return `<div>
    15.                     <div>${item[0].axisValue}</div>
    16.                       <div style="margin: 0 8px;">
    17.                          ${item[1] ? `<div style="color:#ffffff;"><i style="background-color:#ff7700;display: inline-block;height:10px;width:10px;margin-right:8px;border-radius:5px"></i>市场：${item[1].value}%</div>
    18.                          <div style="color:#ffffff;"><i style="background-color:#2a78f7;display: inline-block;height:10px;width:10px;margin-right:8px;border-radius:5px"></i>本店：${item[0].value}%</div> ` : !item[0]
    19.         ? '' : item[0].seriesName === '本店' ? `<div style="color:#ffffff;"><i style="background-color:#2a78f7;display: inline-block;height:10px;width:10px;margin-right:8px;border-radius:5px"></i>本店：${item[0].value}%</div>` : `<div style="color:#ffffff;"><i style="background-color:#ff7700;display: inline-block;height:10px;width:10px;margin-right:8px;border-radius:5px"></i>市场：${item[0].value}%</div>`}  
    20.                       </div>
    21.                     </div>`
    22.                     }
    23.                 },
    24.                 legend: {
    25.                     left: '8%',
    26.                     data: ['市场', '本店'],
    27.                     icon: 'pie'
    28.                 },
    29.                 // color: ['#ff7700', '#2a78f7'],
    30.                 grid: {
    31.                     left: '3%',
    32.                     right: '4%',
    33.                     bottom: '3%',
    34.                     containLabel: true
    35.                 },
    36.                 xAxis: {
    37.                     type: 'category',
    38.                     boundaryGap: false,
    39.                     data: this.chartsa.value,
    40.                     // data: ['2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03', '2012-03'],
    41.                     axisLine: {
    42.                         show: false // 不显示坐标轴轴线
    43.                     },
    44.                     axisTick: {
    45.                         show: false // 不显示坐标轴刻度
    46.                     },
    47.                     axisLabel: {
    48.                         interval: 0,
    49.                         rotate: -10
    50.                     }
    51.                 },
    52.                 yAxis: {
    53.                     // name: '(万元)', // Y轴标题
    54.                     type: 'value',
    55.                     splitNumber: 4,
    56.                     // y: 'center',
    57.                     axisLabel: { formatter: '{value} %' },
    58.                     splitLine: {
    59.                         show: false
    60.                     },
    61.                     axisLine: {
    62.                         show: false // 不显示坐标轴轴线
    63.                     },
    64.                     axisTick: {
    65.                         show: false // 不显示坐标轴刻度
    66.                     }
    67.                 },
    68.                 series: [
    69.                     {
    70.                         name: '本店',
    71.                         type: 'line',
    72.                         stack: '总量',
    73.                         smooth: true,
    74.                         color: '#2a78f7',
    75.                         data: this.chartsa.value3
    76.                     }, {
    77.                         name: '市场',
    78.                         type: 'line',
    79.                         stack: '总量',
    80.                         smooth: true,
    81.                         color: '#ff7700',
    82.                         data: this.chartsa.value2
    83.                     }
    84.                 ]
    85.             }
    86.             myChart.setOption(option, true)
    87.             window.addEventListener('resize', () => {
    88.                 myChart.resize()
    89.             })
    90.         },
    1.  showCharts2() {
    2.             const myChart = echarts.init(this.$refs.box2)
    3.             var option
    4.             option = {
    5.                 tooltip: {
    6.                     trigger: 'item',
    7.                     formatter: '{b}:{d}%'
    8.                 },
    9.                 color: ['#ffc474', '#fdd569', '#fd866a', '#da4745', '#9f87ff', '#8abb78', '#35e1b1', '#73ddff', '#73acff', '#788fbb'],
    10.                 series: [{
    11.                     type: 'pie',
    12.                     radius: ['40%', '70%'],
    13.                     avoidLabelOverlap: true,
    14.                     label: {
    15.                         // show: false,
    16.                         // position: 'center'
    17.                         normal: {
    18.                             // 各分区的提示内容
    19.                             // params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
    20.                             formatter: function(params) {
    21.                                 return params.name + ' ' + params.percent + '%'
    22.                             },
    23.                             textStyle: { // 提示文字的样式
    24.                                 fontSize: 13
    25.                             }
    26.                         }
    27.                     },
    28.                     emphasis: {
    29.                         label: {
    30.                             show: true
    31.                         }
    32.                     },
    33.                     data: this.chartsb
    34.                 }]
    35.             }
    36.             myChart.setOption(option, true)
    37.             // myChart.on('click', function(params) {
    38.             //     console.log(params)
    39.             //     this.$router.push({ path: '/specialist',
    40.             //         query: {
    41.             //             merchant: this.queryParams.merchant,
    42.             //             loginId: this.getQueryVariable('loginId'),
    43.             //             // category: row.category,
    44.             //             token: this.getQueryVariable('token')
    45.             //         }})
    46.             // })
    47.             window.addEventListener('resize', () => {
    48.                 myChart.resize()
    49.             })
    50.         }