current position:Home>Echarts is used in uniapp and encapsulated into components. It is available after real machine test

Echarts is used in uniapp and encapsulated into components. It is available after real machine test

2022-05-15 05:16:04A grain of rice

I did it years ago echarts Encapsulation , But I don't know why , During the real machine test , Just can't render , The chart does not show .
Today, we can finally render it on the real machine !!! I'm so excited !

design sketch

Figure 1 H5 Of :
 Insert picture description here

Figure 2 shows the of Huawei mobile phones :
 Insert picture description here

Project structure :

 Insert picture description here

1.echarts Components :

<template>
	<view>
		<view class="echarts" :id="option.id" :prop="option" :change:prop="echarts.update" @click="echarts.onClick"></view>
	</view>
</template>

<script>
	export default {
    
		name: 'Echarts',
		props: {
    
			option: {
    
				type: Object,
				required: true
			}
		},
		created() {
    
			//  Set random numbers id
			let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
			let len = t.length
			let id = ''
			for (let i = 0; i < 32; i++) {
    
				id += t.charAt(Math.floor(Math.random() * len))
			}
			this.option.id = id
		},
		methods: {
    
			/** * renderjs Click events in , Callback to parent component  * @param {Object} params */
			onViewClick(params) {
    
				this.$emit('click', params)
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	import echarts from '@/components/echarts/echarts.min.js'
	
	export default {
    
		data() {
    
			return {
    
				chart: null,
				clickData: null // echarts Click on the value of the event 
			}
		},
		mounted() {
    
			this.init();
		},
		methods: {
    
			/** *  initialization echarts */
			init() {
    
				//  according to id Initialization diagram 
				this.chart = echarts.init(document.getElementById(this.option.id))
				this.update(this.option)
				// echarts Click events for 
				this.chart.on('click', params => {
    
					//  Cache the data of click events 
					this.clickData = params
				})
			},
			/** *  Click event , Can be passed to the outside  * @param {Object} event * @param {Object} instance */
			onClick(event, instance) {
    
				if (this.clickData) {
    
					//  hold echarts Click the value related to the event and pass it to renderjs Outside 
					instance.callMethod('onViewClick', {
    
						value: this.clickData.data,
						name: this.clickData.name,
						seriesName: this.clickData.seriesName
					})
					//  The last click left the data blank 
					this.clickData = null
				}
			},
			/** *  Monitoring data update  * @param {Object} option */
			update(option) {
    
				if (this.chart) {
    
					//  because App End , The callback function cannot be from renderjs External delivery , Therefore, the related callback functions are customized here 
					if (option) {
    
						// tooltip
						if (option.tooltip) {
    
							//  Determine whether to set tooltip The location of 
							if (option.tooltip.positionStatus) {
    
								option.tooltip.position = this.tooltipPosition()
							}
							//  Determine whether to format tooltip
							// if (option.tooltip.formatterStatus) {
    
								option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)
							// }
						}
					}
					//  Set up the new option
					this.chart.setOption(option, option.notMerge)
				}
			},
			/** *  Set up tooltip The location of , Prevent exceeding the canvas  */
			tooltipPosition() {
    
				return (point, params, dom, rect, size) => {
    
					//  among point For the current mouse position ,size There are two properties in :viewSize and contentSize, They are the outer layer div and tooltip The size of the prompt box 
					let x = point[0]
					let y = point[1]
					let viewWidth = size.viewSize[0]
					let viewHeight = size.viewSize[1]
					let boxWidth = size.contentSize[0]
					let boxHeight = size.contentSize[1]
					let posX = 0 // x coordinates 
					let posY = 0 // y coordinates 
					if (x >= boxWidth) {
     //  Put it on the left 
						posX = x - boxWidth - 1
					}
					if (y >= boxHeight) {
     //  Put it above and below 
						posY = y - boxHeight - 1
					}
					return [posX, posY]
				}
			},
			/** * tooltip format  * @param {Object} unit  The unit after the value  * @param {Object} formatFloat2  Whether to keep two decimal places  * @param {Object} formatThousands  Whether to add the thousandth  */
			tooltipFormatter(unit, formatFloat2, formatThousands) {
    
				return params => {
    
					let result = ''
					// unit = unit ? unit : ''
					for (let i in params) {
    
						if (i == 0) {
    
							result += params[i].data.date
						
						}
						
						
						let value = '--'
						if (params[i].data !== null) {
    
							if(params[i].seriesName==' Average sleep efficiency '){
    
								unit='%'
							}else if(params[i].seriesName==' The average length of sleep '||params[i].seriesName==' The average length of stay in bed '){
    
								unit='h'
							}else if(params[i].seriesName==' Wine average '||params[i].seriesName==' Coffee on average '){
    
								unit=' A cup of '
							}else if(params[i].seriesName==' Average smoke '){
    
								unit=' root '
							}
							value = params[i].data
							//  Keep two decimal places 
							// if (formatFloat2) {
    
							// value = this.formatFloat2(value)
							// }
							//  Add the thousandth 
							// if (formatThousands) {
    
							// value = this.formatThousands(value)
							// }
						}
						// #ifdef H5
						result += '\n' + params[i].seriesName + ':' + params[i].data.value + unit
						// #endif
						
						// #ifdef APP-PLUS
						result += '<br/>' + params[i].marker + params[i].seriesName + ':' + params[i].data.value + unit
						// #endif
					}
					return result
				}
			},
			/** *  Keep two decimal places  * @param {Object} value */
			formatFloat2(value) {
    
				let temp = Math.round(parseFloat(value) * 100) / 100
				let xsd = temp.toString().split('.')
				if (xsd.length === 1) {
    
					temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
					return temp
				}
				if (xsd.length > 1) {
    
					if (xsd[1].length < 2) {
    
						temp = temp.toString() + '0'
					}
					return temp
				}
			},
			/** *  Add the thousandth  * @param {Object} value */
			formatThousands(value) {
    
				if (value === undefined || value === null) {
    
					value = ''
				}
				if (!isNaN(value)) {
    
					value = value + ''
				}
				let re = /\d{1,3}(?=(\d{3})+$)/g
				let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
    
					return s1.replace(re, '$&,') + s2
				})
				return n1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.echarts {
    
		width: 100%;
		height: 100%;
	}
</style>

2. Dependent Library echarts.min.js

There are too many words , Just download it from the official website , Or go GitHub take
https://github.com/apache/echarts/tree/4.2.1/dist

3. Examples of use

<template>
	<view>
		<echarts :option="option" style="height: 560rpx;" @click="echartsClick"></echarts>
		<button @click="updateClick"> Switching data </button>
	</view>
</template>

<script>
	import echarts from '@/components/echarts/echarts.vue'
	export default {
    
		data() {
    
			return {
    
				option: {
    },
				option2: {
    
						//dataZoom-inside  Built in data area scaling component   Built in  1 translation : Slide and drag in the coordinate system to translate the data area .2 The zoom :PC End : The mouse scrolls the wheel within the coordinate system (MAC The touch panel is similar to ; Mobile : On the touch screen of the mobile terminal , Support two finger sliding and scaling .
						  dataZoom: [
							{
    
							  type: 'inside', //1 translation   The zoom 
							  throttle: '50', // Set the frequency at which the view refresh is triggered . The unit is millisecond (ms).
							  minValueSpan: 6, // The minimum value used to limit the window size , On the category axis, it can be set to  5  Express  5  A category 
							  start: 1, // The starting percentage of the data window range   The scope is :0 ~ 100. Express  0% ~ 100%.
							  end:20, // End percentage of data window range . The scope is :0 ~ 100.
							  zoomLock: true // If set to  true  Then lock the size of the selection area , in other words , Can only pan , You can't zoom .
							}
						  ],
						  //  It is mainly used to control the blank space around the chart 
						  grid: {
    
							left: '15%',
							top: '10%'
						  },
				
					  //  Prompt box components 
					  tooltip: {
    
						trigger: 'axis', // Axis trigger , Mainly in the histogram , Line chart and so on will use the category axis in the chart to use .
						backgroundColor: '#505050', // The background color of the floater in the prompt box .
						textStyle:{
    
							  color: '#ffffff' //  The color of the axis line .
						},
					  
						//  Customize the content of the prompt box 
						formatter: function (params, ticket, callback) {
    
						  var text =' Average humidity : ' + params[0].data.value+"%\n";
						  var sleep = ' Working average : ' + params[1].data.value+"h\n";
							var bed = ' Rest on average : ' + params[2].data.value+"h\n";
						  return text+sleep+bed;
						},
						   position: function (point, params, dom, rect, size) {
    
							   //  Fixed on top 
							   return 'top';
						   }
						
					  },
					  // Rectangular coordinate system  grid  Medium  x  Axis ,
					  xAxis: {
    
						type: 'category', //'category'  Taxonomic axis , It is applicable to discrete category data , For this type, you must pass  data  Set category data .
						nameTextStyle: {
    
							 fontSize: 30
						   },
						//  Coordinate axis related settings 
						axisLine: {
    
						  lineStyle: {
    
							color: '#E5E5E5' //  The color of the axis line .
						  }
						},
						
						//  Axis scale label ( category , In short, it is x What's on the axis ) Related Settings 
						axisLabel: {
    
						  //  Whether to display coordinate scale label ( This indicates whether to display x Month on axis )
						  show: true,
						  //  The color of the label text 
						  color: '#000000'
						},
						
						axisPointer: {
    
						  // Remove the moving indicator line 
						  type: 'line',
						  // snap: true,
						  handle: {
    
							show: true,
							color: '#969696',
							size:20
						  }, 
						},
						//x Axis tick mark setting 
						axisTick: {
    
						  show: true
						},
						//  Category data , In the category axis (type: 'category') Effective in .
						data: [
						  '1/1',
						  '1/2',
						  '1/3',
						  '1/4',
						  '1/5',
						  '1/6',
						  '1/7',
						  '1/8',
						  '1/9',
						  '1/10',
						  '1/11',
						  '1/12',
						  '1/13',
						  '1/14',
						  '1/15',
						  '1/16',
						  '1/17',
						  '1/18',
						  '1/19',
						  '1/20',
						  '1/21',
						  '1/22',
						  '1/23',
						  '1/24',
						  '1/25',
						  '1/26',
						  '1/27',
						  '1/28',
						  '1/29',
						  '1/30',
						  '1/31'
						  
					],
												 
					  },
					  // Rectangular coordinate system  grid  Medium  y  Axis ,
					  yAxis: [ 
							{
    
								type: 'value', //'value'  Value axis , For continuous data .
								min: 0,
								max: 100,
								//  Coordinate axis related settings 
								axisLine: {
    
								  show: false //y Axis disappearance 
								},
								//  Axis scale label ( category , In short, it is x What's on the axis ) Related Settings 
								axisLabel: {
    
								  show: true,
								  //  The color of the label text 
								  color: '#999',
								  formatter: '{value} %'
								},
								//y Axis tick mark setting 
								axisTick: {
    
								  show: false
								},
								splitNumber: 5 // The number of segments of the axis , It should be noted that the number of segments is only an estimate , Finally, the number of segments actually displayed will be adjusted according to the readability of the coordinate axis scale display after segmentation . Invalid in category axis .
							},
							{
    
							  type: 'value',
							  min: 0,
							  splitNumber:5,
							  axisLine: {
    
								show: false //y Axis disappearance 
							  },
							  max: 15,
							  axisLabel: {
    
								formatter: '{value} h'
							  }
							},
						
					],
					  series: [
						{
    
						  type: 'line', // A line chart is a chart that uses a line to connect data point markers , Used to show the changing trend of data . And global settings type The effect is the same , Represents a line chart 
						  //  Array of data contents in the series . Array items are usually specific data items .
						   yAxisIndex: 0,
						  data: [
						{
    
						  value: 80,
						  date: '2022 year 1 month 1 Japan '
						},
						{
    
						  value: 86,
						  date: '2022 year 1 month 2 Japan '
						},
						{
    
						  value: 87,
						  date: '2022 year 1 month 3 Japan '
						},
						{
    
						  value: 85,
						  date: '2022 year 1 month 4 Japan '
						},
						{
    
						  value: 90,
						  date: '2022 year 1 month 5 Japan '
						},
						{
    
						  value: 91,
						  date: '2022 year 1 month 6 Japan '
						},
						{
    
						  value: 92,
						  date: '2022 year 1 month 7 Japan '
						},
						{
    
						  value: 93,
						  date: '2022 year 1 month 8 Japan '
						},
						{
    
						  value: 89,
						  date: '2022 year 1 month 9 Japan '
						},
						{
    
						  value: 78,
						  date: '2022 year 1 month 10 Japan '
						},
						{
    
						  value: 83,
						  date: '2022 year 1 month 11 Japan '
						},
						{
    
						  value: 77,
						  date: '2022 year 1 month 12 Japan '
						},
						{
    
						  value: 80,
						  date: '2022 year 1 month 13 Japan '
						},
						{
    
						  value: 86,
						  date: '2022 year 1 month 14 Japan '
						},
						{
    
						  value: 87,
						  date: '2022 year 1 month 15 Japan '
						},
						{
    
						  value: 85,
						  date: '2022 year 1 month 16 Japan '
						},
						{
    
						  value: 90,
						  date: '2022 year 1 month 17 Japan '
						},
						{
    
						  value: 91,
						  date: '2022 year 1 month 18 Japan '
						},
						{
    
						  value: 92,
						  date: '2022 year 1 month 19 Japan '
						},
						{
    
						  value: 93,
						  date: '2022 year 1 month 20 Japan '
						},
						{
    
						  value: 89,
						  date: '2022 year 1 month 21 Japan '
						},
						{
    
						  value: 78,
						  date: '2022 year 1 month 22 Japan '
						},
						{
    
						  value: 83,
						  date: '2022 year 1 month 23 Japan '
						},
						{
    
						  value: 77,
						  date: '2022 year 1 month 24 Japan '
						},
						{
    
						  value: 93,
						  date: '2022 year 1 month 25 Japan '
						},
						{
    
						  value: 89,
						  date: '2022 year 1 month 26 Japan '
						},
						{
    
						  value: 78,
						  date: '2022 year 1 month 27 Japan '
						},
						{
    
						  value: 83,
						  date: '2022 year 1 month 28 Japan '
						},
						{
    
						  value: 77,
						  date: '2022 year 1 month 29 Japan '
						},
						{
    
						  value: 77,
						  date: '2022 year 1 month 30 Japan '
						},
						{
    
						  value: 77,
						  date: '2022 year 1 month 31 Japan '
						},
					  ],
						  //  The style of broken lines 
						  lineStyle: {
    
							color: '#2f5f8f',
							width: 1
						  },
						  //  The style of the inflection point of the polyline 
						  itemStyle: {
    
							normal: {
    
							  //  At rest :
							  color: '#2f5f8f'
							},
							emphasis: {
    
							  //  When the mouse passes :
							  color: '#2f5f8f'
							}
						  },
						  symbol: 'emptyCircle', // Inflection point style 
						  symbolSize: 6 // Inflection point size 
						},
					{
    
						type: 'line', // A line chart is a chart that uses a line to connect data point markers , Used to show the changing trend of data . And global settings type The effect is the same , Represents a line chart 
										  //  Array of data contents in the series . Array items are usually specific data items .
						yAxisIndex: 1,
						data: [
						{
    
						  value: 8,
						  date: '2022 year 1 month 1 Japan '
						},
						{
    
						  value: 8,
						  date: '2022 year 1 month 2 Japan '
						},
						{
    
						  value: 7,
						  date: '2022 year 1 month 3 Japan '
						},
						{
    
						  value: 8,
						  date: '2022 year 1 month 4 Japan '
						},
						{
    
						  value: 9,
						  date: '2022 year 1 month 5 Japan '
						},
						{
    
						  value: 9,
						  date: '2022 year 1 month 6 Japan '
						},
						{
    
						  value: 9,
						  date: '2022 year 1 month 7 Japan '
						},
						{
    
						  value: 9.3,
						  date: '2022 year 1 month 8 Japan '
						},
						{
    
						  value: 8.9,
						  date: '2022 year 1 month 9 Japan '
						},
						{
    
						  value: 7.8,
						  date: '2022 year 1 month 10 Japan '
						},
						{
    
						  value: 8.3,
						  date: '2022 year 1 month 11 Japan '
						},
						{
    
						  value: 7.7,
						  date: '2022 year 1 month 12 Japan '
						},
						{
    
						  value: 8.0,
						  date: '2022 year 1 month 13 Japan '
						},
						{
    
						  value: 8.6,
						  date: '2022 year 1 month 14 Japan '
						},
						{
    
						  value: 8.7,
						  date: '2022 year 1 month 15 Japan '
						},
						{
    
						  value: 8.5,
						  date: '2022 year 1 month 16 Japan '
						},
						{
    
						  value: 9,
						  date: '2022 year 1 month 17 Japan '
						},
						{
    
						  value: 9.1,
						  date: '2022 year 1 month 18 Japan '
						},
						{
    
						  value: 9.2,
						  date: '2022 year 1 month 19 Japan '
						},
						{
    
						  value: 9.3,
						  date: '2022 year 1 month 20 Japan '
						},
						{
    
						  value: 8.9,
						  date: '2022 year 1 month 21 Japan '
						},
						{
    
						  value: 7.8,
						  date: '2022 year 1 month 22 Japan '
						},
						{
    
						  value: 8.3,
						  date: '2022 year 1 month 23 Japan '
						},
						{
    
						  value: 7.7,
						  date: '2022 year 1 month 24 Japan '
						},
						{
    
						  value: 9.3,
						  date: '2022 year 1 month 25 Japan '
						},
						{
    
						  value: 8.9,
						  date: '2022 year 1 month 26 Japan '
						},
						{
    
						  value: 7.8,
						  date: '2022 year 1 month 27 Japan '
						},
						{
    
						  value: 8.3,
						  date: '2022 year 1 month 28 Japan '
						},
						{
    
						  value: 7.7,
						  date: '2022 year 1 month 29 Japan '
						},
						{
    
						  value: 7.7,
						  date: '2022 year 1 month 30 Japan '
						},
						{
    
						  value: 7.7,
						  date: '2022 year 1 month 31 Japan '
						},
					  ],				 
						//  The style of broken lines 
						lineStyle: {
    
							color: '#3c79b6',
							width: 1
						},				 
						//  The style of the inflection point of the polyline 
						itemStyle: {
    
							normal: {
    
							 //  At rest :
							 color: '#3c79b6'
							},
							emphasis: {
    
							  //  When the mouse passes :
							  color: '#3c79b6'
							}
						},				 
						symbol: 'emptyCircle', // Inflection point style 
						 symbolSize: 6 // Inflection point size  
					},	
					{
    
						type: 'line', // A line chart is a chart that uses a line to connect data point markers , Used to show the changing trend of data . And global settings type The effect is the same , Represents a line chart 
										  //  Array of data contents in the series . Array items are usually specific data items .
						yAxisIndex: 1,
						data:[
						{
    
						  value: 7,
						  date: '2022 year 1 month 1 Japan '
						},
						{
    
						  value: 6,
						  date: '2022 year 1 month 2 Japan '
						},
						{
    
						  value: 7,
						  date: '2022 year 1 month 3 Japan '
						},
						{
    
						  value: 5,
						  date: '2022 year 1 month 4 Japan '
						},
						{
    
						  value: 9,
						  date: '2022 year 1 month 5 Japan '
						},
						{
    
						  value: 9,
						  date: '2022 year 1 month 6 Japan '
						},
						{
    
						  value: 9,
						  date: '2022 year 1 month 7 Japan '
						},
						{
    
						  value: 9,
						  date: '2022 year 1 month 8 Japan '
						},
						{
    
						  value: 8,
						  date: '2022 year 1 month 9 Japan '
						},
						{
    
						  value: 7,
						  date: '2022 year 1 month 10 Japan '
						},
						{
    
						  value: 8,
						  date: '2022 year 1 month 11 Japan '
						},
						{
    
						  value: 7,
						  date: '2022 year 1 month 12 Japan '
						},
						{
    
						  value: 8,
						  date: '2022 year 1 month 13 Japan '
						},
						{
    
						  value: 8,
						  date: '2022 year 1 month 14 Japan '
						},
						{
    
						  value: 8,
						  date: '2022 year 1 month 15 Japan '
						},
						{
    
						  value: 8,
						  date: '2022 year 1 month 16 Japan '
						},
						{
    
						  value: 9,
						  date: '2022 year 1 month 17 Japan '
						},
						{
    
						  value: 9,
						  date: '2022 year 1 month 18 Japan '
						},
						{
    
						  value: 9,
						  date: '2022 year 1 month 19 Japan '
						},
						{
    
						  value: 9,
						  date: '2022 year 1 month 20 Japan '
						},
						{
    
						  value: 8,
						  date: '2022 year 1 month 21 Japan '
						},
						{
    
						  value: 7,
						  date: '2022 year 1 month 22 Japan '
						},
						{
    
						  value: 8,
						  date: '2022 year 1 month 23 Japan '
						},
						{
    
						  value: 7,
						  date: '2022 year 1 month 24 Japan '
						},
						{
    
						  value: 9,
						  date: '2022 year 1 month 25 Japan '
						},
						{
    
						  value: 8,
						  date: '2022 year 1 month 26 Japan '
						},
						{
    
						  value: 7,
						  date: '2022 year 1 month 27 Japan '
						},
						{
    
						  value: 8,
						  date: '2022 year 1 month 28 Japan '
						},
						{
    
						  value: 7,
						  date: '2022 year 1 month 29 Japan '
						},
						{
    
						  value: 7,
						  date: '2022 year 1 month 30 Japan '
						},
						{
    
						  value: 7,
						  date: '2022 year 1 month 31 Japan '
						},
					  ],				 
						//  The style of broken lines 
						lineStyle: {
    
							color: '#55aaff',
							width: 1
						},				 
						//  The style of the inflection point of the polyline 
						itemStyle: {
    
							normal: {
    
							 //  At rest :
							 color: '#55aaff'
							},
							emphasis: {
    
							  //  When the mouse passes :
							  color: '#55aaff'
							}
						},				 
						symbol: 'emptyCircle', // Inflection point style 
						 symbolSize: 6 // Inflection point size  
					},		
					  ]
				},

				option3: {
    
					notMerge: true, //  Custom variable :true Represents not merging data , For example, you need to change the line shape from the chart to the column shape true;false Or don't write for merging 
					xAxis: {
    
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
    
						type: 'value'
					},
					series: [{
    
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						showBackground: true,
						backgroundStyle: {
    
							color: 'rgba(220, 220, 220, 0.8)'
						}
					}]
				}
			};
		},
		components: {
    
			echarts
		},
		onLoad() {
    
			this.option = this.option3
		},
		methods: {
    
			/** *  Click event  * @param {Object} params */
			echartsClick(params) {
    
				console.log(' Click data ', params)
			},
			/** *  Switching data  */
			updateClick() {
    
				if (this.option === this.option2) {
    
					this.option = this.option3
				} else {
    
					this.option = this.option2
				}
			}
		}
	};
</script>

<style></style>

copyright notice
author[A grain of rice],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/131/202205111246439647.html

Random recommended