1 data1: ['104', '61', '60', '43', '31', '29', '27', '12', '11', '11', '10', '5', '4', '3', '1', '1', '1', '1'], 2 3 data2:['91', '40', '42', '30', '23', '15', '24', '8', '6', '15', '8', '4', '6', '3', '3', '2', '0', '2'],
1 drawChart() { 2 // 基于准备好的dom,初始化echarts实例 这个和上面的main对应 3 let myChart = echarts.init(document.getElementById("main")); 4 this.data1= this.data1.map(Number)//将字符串转换数字 5 this.data2 = this.data2.map(Number) 6 this.data3 = this.data1.map((num1, index) => { 7 return this.data2[index]>num1 ? num1/2 : '' ; 8 }); 9 this.data4 = this.data1.map((num2, index) => { 10 return this.data2[index]>num2 ? '':num2/2 ; 11 }); 12 console.log( '浅色',this.data3,'蓝色',this.data4,this.data1,this.data2); 13 this.data1.forEach(item => item * 1.2) // 区间范围最大值、最小值 14 this.array1 = this.data1.reduce((a,b) => a>b?a:b); 15 10:30:5510:30:57this.array2 = this.data1.reduce((a,b) => a<b?a:b); 16 // console.log(op1); 17 // 指定图表的配置项和数据 18 let option = { 19 backgroundColor:"#6d979d", 20 title: { 21 text: "ECharts 入门示例", 22 }, 23 tooltip: { 24 show: true, 25 // textStyle: { color: "#fff", fontSize: 22 }, 26 trigger: "axis", 27 axisPointer: { 28 type: "shadow", 29 }, 30 31 // valueFormatter: (value) => '$'+value 32 }, 33 legend: { 34 data: ["销量"], 35 }, 36 xAxis: [ 37 { 38 // max: 80, //设置最大值 y轴数值 (不设置默认) 39 // min: 0, //设置最小值 y轴数值(不设置默认) 40 // nameGap: 20, 41 // boundaryGap: false, 42 // splitNumber : 13, 43 // interval:5, // 步长 44 min:0, // 起始 45 max:this.array1, // 终止 46 axisLabel: { 47 // show:false, 48 borderWidth: 1, 49 margin: 2, // 刻度标签与轴线之间的距离 50 // fontSize : 5, 51 formatter: function (val) {//百分比显示 52 return val + '%'; 53 } 54 }, 55 } 56 ], 57 yAxis: [{ 58 type:'category', 59 axisLine: { //y轴 60 show: false 61 }, 62 axisTick: { 63 show: false 64 }, 65 inverse: true, 66 "data": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子",'11','22','33','44','55','66','77','88','99','10','101','102'], 67 axisLabel: { 68 color: '#fff', 69 fontSize: 14, 70 }, 71 splitLine: { 72 show: false, 73 }, 74 75 axisLine: { 76 show: true, 77 lineStyle: { 78 color: '#ccc' 79 } 80 }, 81 }, 82 ], 83 series: [{ 84 tooltip: { 85 trigger: 'axis', 86 show:false 87 }, 88 name: '标准化', 89 type: 'bar', 90 barWidth: 15, // 柱子宽度 91 label: { 92 show: true, 93 position: 'right', // 位置 94 // color: '#00DEFF', 95 color:'rgb(255,255,255)', 96 fontSize: 14, 97 distance: 8, // 距离 98 formatter: '{c} ' // 这里是数据展示的时候显示的数据 99 }, 100 itemStyle: { 101 normal: { 102 barBorderRadius: [10, 10, 10, 10], 103 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ 104 offset: 0, 105 color: '#23c2d7' 106 }, 107 { 108 offset: 1, 109 color: '#35e8df' 110 } 111 ]) 112 } 113 }, 114 z :1, 115 data: this.data1, 116 117 118 }, 119 {//这里是作比较超出 120 tooltip: { 121 trigger: 'axis', 122 show:false 123 }, 124 name: 'duo', 125 type: 'scatter', 126 color: 'blue', 127 symbolSize: 20, 128 // symbolOffset :[-50, '50%'], 129 symbol: 'path://M 200 200 l-40 100 100 -80 -120 0 100 80 -40 -120 -40 120z',//相当于是type 130 z :3,//好像没用 131 data: this.data4, 132 }, 133 {//这里是作比较未超出 134 tooltip: { 135 trigger: 'axis', 136 show:false 137 }, 138 name: 'shao', 139 type: 'scatter', 140 color: '#23c2d7', 141 symbolSize: 20, 142 z :2, 143 symbol: 'path://M 200 200 l-40 100 100 -80 -120 0 100 80 -40 -120 -40 120z',//相当于是type 144 145 data: this.data3, 146 }, 147 {//显示任务数 148 tooltip: { 149 trigger: 'axis', 150 axisPointer: { 151 type:'shadow' 152 } 153 }, 154 label: { 155 show:false 156 }, 157 symbol:'none', 158 159 name: '66', 160 type: 'scatter', 161 data:this.data2 162 } 163 164 165 ], 166 167 168 }; 169 // 使用刚指定的配置项和数据显示图表。 170 myChart.setOption(option); 171 },