首页 > 其他分享 >在echart中添加多个字段,作比较来显示不同的五角星

在echart中添加多个字段,作比较来显示不同的五角星

时间:2022-11-18 10:45:21浏览次数:60  
标签:10 false echart show color type 添加 五角星 data1

 


 


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     },

 

标签:10,false,echart,show,color,type,添加,五角星,data1
From: https://www.cnblogs.com/szx911/p/16902426.html

相关文章