no message

src/views/test/components/cqzrqs.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<jt-echarts style="width: 320rem;height: 260rem;margin:10rem 10rem 10rem 20rem;"
+		<jt-echarts style="width: 380rem;height: 260rem;margin:10rem 10rem 10rem 20rem;"
 			:chartData="option"></jt-echarts>
 	</div>
 </template>
@@ -34,207 +34,48 @@
 		},
 		methods: {
 			typeCharts0() {
-				var getName =['小花','小明','小红','吓不不','刃甲','加加','鸿基','新能源','家喻户晓','老师'];
-				var getValue =[219,241,174,44,435,617,114,82,77,50];
-				var max = Math.max.apply(null, getValue);
-				var getMax=[];
-				for(var i=0;i<getName.length;i++){
-				    getMax.push(max)
-				}
-				console.log(getMax) ;
-				// typeCharts0() {
-				// 	this.option = this.getOption();
-				// 	// var chartDom = document.getElementById('echarts');
-				// 	// var myChart = echarts.init(chartDom);
-				// 	// myChart.setOption(option, true);
-				// },
 				this.option = {
-					// backgroundColor: "#003366",
-					grid: {
-						left: '4%',
-						right: '2%',
-						bottom: '2%',
-						top: '2%',
-						containLabel: true
-					},
-					tooltip: {
-						trigger: 'axis',
-						axisPointer: {
-							type: 'none'
-						},
-						formatter: function(params) {
-							return params[0].name + ' : ' + params[0].value
-						}
-					},
-					xAxis: {
-						show: false,
-						type: 'value'
-					},
-					yAxis: [{
-						type: 'category',
-						inverse: true,
-						offset: 100,
-
-						axisLabel: {
-							show: true,
-							align: 'left',
-							textStyle: {
-								color: '#66cc00',
-
-							},
-							formatter: function(value, index) {
-								var num = ''
-								var str = ''
-								var no = 'NO.';
-								num = (index + 1);
-								if (index === 0) {
-									str = '{no1|' + no + '} {num1|' + num + '} {title1|' + value + '}'
-								} else if (index === 1) {
-									str = '{no2|' + no + '} {num2|' + num + '} {title2|' + value + '}'
-								} else if (index === 2) {
-									str = '{no3|' + no + '} {num3|' + num + '} {title3|' + value + '}'
-								} else {
-									str = '{no|' + no + '} {num|' + num + '} {title|' + value + '}'
-								}
-								return str;
-
-							},
-							rich: {
-								no: {
-									color: '#ffcccc',
-									fontSize: 14,
-
-								},
-								no1: {
-									color: '#ff4d4d',
-									fontSize: 14,
-
-								},
-								no2: {
-									color: '#4dd2ff',
-									fontSize: 14,
-
-								},
-								no3: {
-									color: '#ffff00',
-									fontSize: 14,
-
-								},
-								num: {
-									color: '#fff',
-									backgroundColor: '#ffcccc',
-									width: 20,
-									height: 20,
-									fontSize: 14,
-									align: 'center',
-									borderRadius: 100
-								},
-								num1: {
-									color: '#fff',
-									backgroundColor: '#ff4d4d',
-									width: 20,
-									height: 20,
-									fontSize: 14,
-									align: 'center',
-									borderRadius: 100
-								},
-								num2: {
-									color: '#fff',
-									backgroundColor: '#4dd2ff',
-									width: 20,
-									height: 20,
-									fontSize: 14,
-									align: 'center',
-									borderRadius: 100
-								},
-								num3: {
-									color: '#fff',
-									backgroundColor: '#ffff00',
-									width: 20,
-									height: 20,
-									fontSize: 14,
-									align: 'center',
-									borderRadius: 100
-								},
-								title: {
-
-									color: '#ffcccc',
-								},
-								title1: {
-
-									color: '#ff4d4d',
-								},
-								title2: {
-
-									color: '#4dd2ff',
-								},
-								title3: {
-
-									color: '#ffff00',
-								},
-							}
-						},
-						splitLine: {
-							show: false
-						},
-						axisTick: {
-							show: false
-						},
-						axisLine: {
-							show: false
-						},
-						data: getName
-					}, {
-						type: 'category',
-						inverse: true,
-						offset: -50,
-						axisTick: 'none',
-						axisLine: 'none',
-						show: true,
-						axisLabel: {
-							textStyle: {
-								color: '#ffffff',
-								fontSize: '12'
-							},
-
-						},
-						data: getValue
-					}],
-					series: [{
-							name: '值',
-							type: 'bar',
-							zlevel: 1,
-							itemStyle: {
-								normal: {
-									barBorderRadius: 30,
-									// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-									// 	offset: 0,
-									// 	color: 'rgb(128,204,255,1)'
-									// }, {
-									// 	offset: 1,
-									// 	color: 'rgb(46,200,207,1)'
-									// }]),
-								},
-							},
-							barWidth: 20,
-							data: getValue
-						},
-						{
-							name: '背景',
-							type: 'bar',
-							barWidth: 20,
-							barGap: '-100%',
-							data: getMax,
-							itemStyle: {
-								normal: {
-									color: 'rgba(24,31,68,1)',
-									barBorderRadius: 30,
-								}
-							},
-						},
-					]
+				  dataset: {
+				    source: [
+				      ['score', 'amount', 'product'],
+				      [89.3, 56, '天牛'],
+				      [57.1, 72, '布甲'],
+				      [74.4, 100, '黑翅蛾'],
+				      [50.1, 69, '美国白蛾'],
+				      [89.7, 20, '美国小蛾'],
+				      [68.1, 35, '黄群页蛾'],
+				      [19.6, 60, '隐翅虫']
+				    ]
+				  },
+				  grid: { containLabel: true },
+				  xAxis: { name: 'amount' },
+				  yAxis: { type: 'category' },
+				  visualMap: {
+				    show:false,
+				    orient: 'horizontal',
+				    left: 'center',
+				    min: 10,
+				    max: 100,
+				    text: ['High Score', 'Low Score'],
+				    // Map the score column to color
+				    dimension: 0,
+				    inRange: {
+				      color: ['#65B581', '#FFCE34', '#FD665F','#F300FF','#0153E5']
+				    }
+				  },
+				  series: [
+				    {
+				      type: 'bar',
+				      encode: {
+				        // Map the "amount" column to X axis.
+				        x: 'amount',
+				        // Map the "product" column to Y axis
+				        y: 'product'
+				      }
+				    }
+				  ]
 				};
-
+				
 			},
 		}