1. showCharts() {
    2.         const myChart = echarts.init(this.$refs.box)
    3.         var option
    4.         option = {
    5.           // tooltip: {
    6.           //   trigger: 'axis'
    7.           // },
    8.           tooltip: {
    9.             trigger: 'axis',
    10.             formatter: function (item) {
    11.               var relVal = item[0].axisValue
    12.               for (var i = 0, l = item.length; i < l; i++) {
    13.                 relVal += '<br/>' + item[i].marker + item[i].seriesName + ' : ' + item[i].value + '万元'
    14.               }
    15.               return relVal
    16.             }
    17.           },
    18.           legend: {
    19.             selectedMode: false,
    20.             right: '3%',
    21.             top: '12%',
    22.             data: ['采购金额', '销售金额'],
    23.             icon: 'pie'
    24.           },
    25.           grid: {
    26.             left: '3%',
    27.             right: '3%',
    28.             bottom: '3%',
    29.             containLabel: true
    30.           },
    31.           xAxis: {
    32.             type: 'category',
    33.             boundaryGap: false,
    34.             data: this.supplierobj.monthDate,
    35.             axisLine: {
    36.               show: false // 不显示坐标轴轴线
    37.             },
    38.             axisTick: {
    39.               show: false // 不显示坐标轴刻度
    40.             },
    41.             axisLabel: {
    42.               interval: 0,
    43.               rotate: 0
    44.             }
    45.           },
    46.           yAxis: {
    47.             name: '单位：(万元)', // Y轴标题
    48.             type: 'value',
    49.             splitNumber: 5,
    50.             axisLine: {
    51.               show: false // 不显示坐标轴轴线
    52.             },
    53.             axisTick: {
    54.               show: false // 不显示坐标轴刻度
    55.             }
    56.           },
    57.           series: [{
    58.               name: '采购金额',
    59.               type: 'line',
    60.               color: '#0077FF',
    61.               data: this.supplierobj.buyAmount
    62.             },
    63.             {
    64.               name: '销售金额',
    65.               type: 'line',
    66.               color: '#FF9A00',
    67.               data: this.supplierobj.dqXsAmtMonth
    68.             }
    69.           ]
    70.         }
    71.         myChart.setOption(option, true)
    72.         window.addEventListener('resize', () => {
    73.           myChart.resize()
    74.         })
    75.       },
    1. showCharts1() {
    2.         const myChart = echarts.init(this.$refs.box1)
    3.         var option
    4.         var _this = this;
    5.         option = {
    6.           color: ['#2D5DFE', '#ffffff', '#3E95FE', '#ffffff', '#27DA7F', '#ffffff', '#FAC009', '#ffffff'],
    7.           legend: {
    8.             selectedMode: false,
    9.             x: 'center',
    10.             y: 'bottom',
    11.             data: ['A类供应商', 'B类供应商', 'C类供应商', 'D类供应商']
    12.           },
    13.           grid: {
    14.             x: 20,
    15.             y: 20,
    16.             // left: '2%',
    17.             // right: '4%',
    18.             // bottom: '3%',
    19.             containLabel: true
    20.           },
    21.           series: [{
    22.             name: 'Funnel',
    23.             type: 'funnel',
    24.             left: -160,
    25.             top: 20,
    26.             bottom: 0,
    27.             hoverAnimation: false,
    28.             // height:150,
    29.             width: '100%',
    30.             min: 0,
    31.             max: 100,
    32.             minSize: '0',
    33.             maxSize: '0',
    34.             sort: 'none',
    35.             gap: 2,
    36.             z: 0,
    37.             label: {
    38.               show: true, //默认展示
    39.               formatter: function (item) {
    40.                 return item.name + ': ' + _this.categoryobj[item.dataIndex].supplierNum + '家 ' + _this.categoryobj[item.dataIndex].buyAmount+
    41.                   '万元 ' + ' 占' + _this.categoryobj[item.dataIndex].buyAmountPer + '%'
    42.               },
    43.               position: 'right',
    44.             },
    45.             labelLine: {
    47.               show: true,
    48.               normal: {
    49.                 length: 110,
    50.                 position: 'right',
    51.                 lineStyle: {
    52.                   width: 1,
    53.                   // color:'#e8e9f1',
    54.                   type: 'solid'
    56.                 },
    57.               },
    58.             },
    59.             data: this.categoryobj
    60.           },
    61.           {
    62.             name: 'Funnel',
    63.             type: 'funnel',
    64.             left: -105,
    65.             top: 20,
    66.             bottom: 0,
    67.             hoverAnimation: false,
    68.             // height:150,
    69.             width: '80%',
    70.             min: 0,
    71.             max: 100,
    72.             minSize: '1%',
    73.             maxSize: '40%',
    74.             sort: 'none',
    75.             gap: 2,
    76.             z: 1,
    77.             label: {
    78.               show: true, //默认展示
    79.               formatter: function (item) {
    80.                 return  item.dataIndex%2==0?_this.categoryobj[item.dataIndex].buyAmount +'万元' :''
    81.               },
    82.               position: 'inside',
    83.             },
    84.             labelLine: {
    86.               show: true,
    87.               normal: {
    88.                 length: 45,
    89.                 position: 'inside',
    90.                 lineStyle: {
    91.                   width: 1,
    92.                   // color:'#e8e9f1',
    93.                   type: 'solid'
    95.                 },
    96.               },
    97.             },
    98.             data: this.categoryobj
    99.           }]
    100.         };
    101.         myChart.setOption(option, true)
    102.         window.addEventListener('resize', () => {
    103.           myChart.resize()
    104.         })
    105.       },
    1. showCharts2(obj) {
    2.         const myChart = echarts.init(this.$refs.box2)
    3.         var option
    4.         const _this = this
    5.         option = {
    6.           // tooltip: {
    7.           //   trigger: 'item',
    8.           //   // formatter: '{a} <br/>{b} : {c} ({d}%)'
    9.           //   formatter: '{b} : {c} ({d}%)'
    10.           // },
    11.           legend: {
    12.             orient: 'vertical',
    13.             // left: 'right',
    14.             right: 50,
    15.             top: 150,
    16.             selectedMode: false,
    17.             data: ['A类风险', 'B类风险', 'C类风险', 'D1类风险', 'D2类风险']
    18.           },
    19.           color: ['#3D7EFF', '#52CCA3', '#F97272', '#F79B40', '#E34848'],
    20.           toolbox: {
    21.             show: true,
    22.           },
    23.           series: [{
    24.             // name: 'Area Mode',
    25.             label: {
    26.               show: true, //默认展示
    27.               // formatter: function (item) {
    28.               //   return item.name + ': ' + _this.categoryobj[item.dataIndex].supplierNum + '家 ' + _this.categoryobj[item.dataIndex].buyAmount+
    29.               //     '万元 ' + ' 占' + _this.categoryobj[item.dataIndex].buyAmountPer + '%'
    30.               // },
    31.               // position: 'right',
    32.               formatter: function (item) {
    33.                 // console.log(item)
    34.                 if (_this.radio4 == '数量') {
    35.                   return item.name + ' ' + item.data.value + '家\n' + obj[item.dataIndex].riskRatio
    36.                 } else {
    37.                   return item.name + ' ' + item.data.value + '万元\n' + obj[item.dataIndex].riskRatio
    38.                 }
    39.               }
    40.             },
    41.             type: 'pie',
    42.             // radius: [20, 140],
    43.             radius: '50%',
    44.             center: ['40%', '38%'],
    45.             avoidLabelOverlap: true,
    46.             // roseType: 'area',
    47.             // minAngle:30,
    48.             itemStyle: {
    49.               borderRadius: 5
    50.             },
    51.             data: obj
    52.           }]
    53.         };
    54.         myChart.setOption(option, true)
    55.         window.addEventListener('resize', () => {
    56.           myChart.resize()
    57.         })
    58.       },
    1. showCharts3(obj, arr) {
    2.         const myChart = echarts.init(this.$refs.box3)
    3.         var option
    4.         const _this = this
    5.         option = {
    6.           tooltip: {
    7.             trigger: 'axis',
    8.             formatter: function (params) {
    9.               if (_this.radio5 == '数量') {
    10.                 var relVal = params[0].name
    11.                 for (var i = 0, l = params.length; i < l; i++) {
    12.                   relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '家'
    13.                 }
    14.                 return relVal
    15.               } else {
    16.                 var relVal = params[0].name
    17.                 for (var i = 0, l = params.length; i < l; i++) {
    18.                   relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '万元'
    19.                 }
    20.                 return relVal
    21.               }
    22.             },
    23.           },
    24.           grid: {
    25.             left: '3%',
    26.             right: '4%',
    27.             bottom: '27%',
    28.             top: 15,
    29.             containLabel: true
    30.           },
    31.           xAxis: {
    32.             type: 'category',
    33.             boundaryGap: false,
    34.             data: arr,
    35.             axisLine: {
    36.               show: false, // 不显示坐标轴轴线
    37.               onZero: true
    38.             },
    39.             axisTick: {
    40.               show: false // 不显示坐标轴刻度
    41.             },
    42.           },
    43.           yAxis: {
    44.             type: 'value',
    45.             splitLine: {
    46.               show: false
    47.             },
    48.             axisLine: {
    49.               show: false // 不显示坐标轴轴线
    50.             },
    51.             axisTick: {
    52.               show: false // 不显示坐标轴刻度
    53.             }
    54.           },
    55.           series: obj,
    56.         };
    57.         myChart.setOption(option, true)
    58.         window.addEventListener('resize', () => {
    59.           myChart.resize()
    60.         })
    61.       },
    1. showCharts4(obj) {
    2.         const myChart = echarts.init(this.$refs.box4)
    3.         var option
    4.         option = {
    5.           tooltip: {
    6.             trigger: 'item'
    7.           },
    8.           // legend: {
    9.           //   // top: -20,
    10.           //   // orient: 'vertical',
    11.           //   // top:-10,
    12.           //   // left: 'right',
    13.           //   right: '2%',
    14.           //   // right: 'right',
    15.           //   data: ['A类风险', 'B类风险', 'C类风险', 'D1类风险', 'D2类风险']
    16.           // },
    17.           // color: ['#ff0000', '#ff9900', '#ffff00', '#00ff00', '#4a86e8'],
    18.           // grid: { // 控制图的大小，调整下面这些值就可以，
    19.           //     x: 40,
    20.           //     y:50,
    21.           //     x2: 100,
    22.           //     y2: 150// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
    23.           // },
    24.           radar: {
    25.             center: ['50%', '35%'],
    26.             radius: '50%',
    27.             // shape: 'circle',
    28.             splitNumber: 5, // 雷达图圈数设置
    29.             indicator: [
    30.               // { name: '敞口逾期（次数）', color: '#222222', max: 100 },
    31.               {
    32.                 name: '敞口逾期（次数）',
    33.                 color: '#222222'
    34.               },
    35.               {
    36.                 name: '敞口逾期（金额）',
    37.                 color: '#222222'
    38.               },
    39.               {
    40.                 name: '盘点差异（金额）',
    41.                 color: '#222222'
    42.               },
    43.               {
    44.                 name: '往来对账差异（金额）',
    45.                 color: '#222222'
    46.               },
    47.               {
    48.                 name: '销售达成（率）',
    49.                 color: '#222222'
    50.               }
    51.             ],
    52.             splitArea: {
    53.               // show: false,
    54.               // areaStyle: {
    55.               //   color: 'rgba(255,0,0,0)' // 图表背景的颜色
    56.               // }
    57.             }
    59.           },
    60.           series: [{
    61.             // name: '预算 vs 开销（Budget vs spending）',
    62.             // radius: ['50%', '65%'],
    63.             type: 'radar',
    64.             data: obj
    65.           }]
    66.         }
    67.         myChart.setOption(option, true)
    68.         window.addEventListener('resize', () => {
    69.           myChart.resize()
    70.         })
    71.       },
    1. showCharts(charts) {
    2.         let myChart = echarts.init(this.$refs.box);
    3.         var option;
    4.         option = {
    5.           tooltip: {
    6.           trigger: "axis",
    7.           // position: "top",
    8.         },
    9.          formatter: function (item) {
    10.           //  console.log(item)
    11.               return `<div>
    12.           <div style="margin: 0 8px;">
    13.           ${ charts.flag[item[0].dataIndex]==1?`<div style="color:#ffffff;margin-left:10px;">巡检日期：${item[0].name}</div>`:''}
    14.             <div style="color:#ffffff;margin-left:10px;">金额：${item[0].value}（万元）</div>
    15.           </div>
    16.         </div>`
    17.           },
    18.           color : ["rgba(73, 168, 255", "rgba(0,127,231", "rgba(106,234,103"],
    19.           xAxis: {
    20.               type: 'category',
    21.               boundaryGap: false,
    22.               data:charts.lineX,
    23.               show: true,
    24.           },
    25.           yAxis: {
    26.               splitLine: {show: false},
    27.               type: 'value'
    28.           },
    29.           series: [{
    30.               data: charts.value,
    31.               type: 'line',
    32.               areaStyle: {},
    33.               smooth: true,
    34.               show: true,
    35.           }]
    36.       };
    37.       myChart.setOption(option, true);
    38.       window.addEventListener("resize", () => {
    39.         myChart.resize();
    40.       });
    41.       },