Package download is not supported in uni-app, go to the official website to download echarts.min.js, directly import this file for use
1. Download echarts.min.js
Official website download page: Download – Apache ECharts
Click Dist to go to GitHub
Click to enter echarts.min.js,
Click Raw to view the entire content of the file. Copy and paste the contents into the new echarts.min.js file.
2, echarts.min.js path
Put the echarts.min.js file in the static folder, the path is script.src = ‘./static/echarts.min.js’ when importing
3. Component echarts.vue
The content of the component can be used directly
<template>
<view>
<view class="echarts" :prop="option" :change:prop="echarts.update"></view>
</view>
</template>
<script>
export default {
name: 'Echarts',
props: {
option: {
type: Object,
required: true
}
}
}
</script>
<script module="echarts" lang="renderjs">
export default {
data() {
return {
chart: null
}
},
mounted() {
if (typeof window.echarts === 'object') {
this.init()
} else {
// Dynamically import class library
const script = document. createElement('script')
script.src = './static/echarts.min.js'
script.onload = this.init
document.head.appendChild(script)
}
},
methods: {
/**
* Initialize echarts
*/
init() {
this.chart = echarts.init(this.$el)
this. update(this. option)
},
/**
* Monitoring data update
* @param {Object} option
*/
update(option) {
if (this. chart) {
// Since the callback function cannot be passed from outside renderjs on the App side, the relevant callback function is customized here
if (option) {
//tooltip
if (option. tooltip) {
// Determine whether to set the position of the tooltip
if (option. tooltip. positionStatus) {
option.tooltip.position = this.tooltipPosition()
}
// Determine whether to format the tooltip
if (option. tooltip. formatterStatus) {
option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2,
option.tooltip.formatThousands)
}
}
}
// set new option
this.chart.setOption(option, option.notMerge)
}
},
/**
* Set the position of the tooltip to prevent it from exceeding the canvas
*/
tooltipPosition() {
return (point, params, dom, rect, size) => {
// where point is the current mouse position, and there are two attributes in size: viewSize and contentSize, which are the sizes of the outer div and tooltip prompt boxes respectively
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 coordinate position
let posY = 0 //y coordinate position
if (x < boxWidth) { //The left side cannot be opened
posX = 5
} else { // put the bottom on the left
posX = x - boxWidth
}
if (y < boxHeight) { //The top cannot be opened
posY = 5
} else { //The top can be put down
posY = y - boxHeight
}
return [posX, posY]
}
},
/**
* tooltip formatting
* @param {Object} unit the unit after the value
* @param {Object} formatFloat2 whether to keep two decimal places
* @param {Object} formatThousands whether to add thousands
*/
tooltipFormatter(unit, formatFloat2, formatThousands) {
return params => {
let result = ''
unit = unit? unit : ''
for (let i in params) {
if (i == 0) {
result + = params[i].axisValueLabel
}
let value = '--'
if (params[i].data !== null) {
value = params[i].data
// retain two decimal places
if (formatFloat2) {
value = this. formatFloat2(value)
}
// add thousands
if (formatThousands) {
value = this. formatThousands(value)
}
}
// #ifdef H5
result + = '\\
' + params[i].seriesName + ':' + value + ' ' + unit
// #endif
// #ifdef APP-PLUS
result + = '<br/>' + params[i].marker + params[i].seriesName + ':' + 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 thousands
* @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, '$ & amp;,') + s2
})
return n1
}
}
}
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>
4. Page usage
Import the echarts component on the page to be used, and the following is a simple line chart. Refer to echarts official website for specific requirements. Multiple graphs can be displayed. Just need more than one. :option is the data to display