This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging
preface
This collection is a collection of issues encountered in the front-end separation architecture, WebPack packaging, vue.js framework technology.
Used in webpack ECharts see the official document: echarts.baidu.com/tutorial.ht…
Json. parse object conversion problem
Obj = json.parse (data)
SyntaxError: Unexpected token . in JSON at position 0
The reason:
- Data is already an object.
- Json.parse () : converts a JSON string to a JSON object
- Json.stringify () : Converts a JSON object to a JSON string
The div height of echarts must be defined
Undefined height may result in loading but not showing!
Eecharts div height must be defined!!
Of course the width is best defined!!
Three, elementUI TAB page drawing echarts graphics problem
The TAB page of elementUI is controlled by v-show, but the TAB page exists but is not displayed (v-if no V-show exists), but not by the height and width of the current TAB!
Can not put all TAB page pictures on one time, the prompt dom width is not defined!!
So you can draw by passing the current value to Echarts when you switch tabs.
Four, theme JSON introduction problem
1. Json import and import
obj = JSON.parse('/static/***.json')
Parse can’t import JSON like this, so I’ll import it
import from '/static/***.json'
It doesn’t work, who told you to import so!!
2. Try jquery to read json files
jQuery.getJSON("/static/***.json", "", function(response) {
obj = JSON.parse(response)
})
Copy the codeResponse is already an object! No more json.parse!
3. Just register for the topic
jQuery.getJSON("/static/***.json", "", function(response) {
echarts.registerTheme('themeName', response)
})
let myChart = echarts.init(document.getElementById('test'), 'themeName')
Copy the codeJquery asynchrony, so it’s back to default.
4, so put init after jQuery processing
Here we can finally introduce custom theme colors
jQuery.getJSON("/static/***.json", "", function(response) {
echarts.registerTheme('themeName', response)
echarts.init(document.getElementById('test'), 'themeName')
})
Copy the code5, Finally, import is very easy to use, here is what jquery import.
import chartOpt from './***.json'
let self = this
echarts.registerTheme('themeName', chartOpt)
self.initChart()
Copy the codeHehe hehe, actually this is good.
Echarts3D diagram introduction requires an additional download to install echarts-GL
In package.json, add “echarts-gl”: “^1.1.1” to dependencies
Go to the project root directory and run the NPM install echarts-gl –save command
Webpack will download the package and the save directive will save the downloaded details to a package-lock.json file
"Echarts-gl ": {"version": "1.1.1", "resolved": "Https://registry.npmjs.org/echarts-gl/-/echarts-gl-1.1.1.tgz", "integrity" : "sha512-cRSTU9H+Ay+qCUFowm+2XcxYqCfi/OLK805NISeJunKgJa5p+7p7tnHZoI0qKebjtHu8VbFSOBk9UvWZ01adng==", "requires": {"claygl": "1.2.3", "zrender": "4.0.4"}},Copy the codeImport ‘echarts-gl’ when using echarts.
6. Echarts cache problem
When series[] contains multiple objects and groups of data[] :
In the case of a polyline graph, one polyline can be increased to two, but when data[] in series[] is reduced to one polyline, the previous two polylines are still displayed.
Thought process:
Go to this.mychart.setoption (this.CurrentData) and print this.currentData
There is only one series[], but it can draw two or even more line charts!!
Select * from ‘setOption’ where ‘clear’ = ‘setOption’ where ‘clear’ = ‘setOption’;
this.myChart.clear()
this.myChart.setOption(this.currentData)
Copy the codeSure enough, the problem was solved.
7. The problem of redrawing the echarts after the width changes
Window. Onresize Listens for width changes in wool
It is not recommended to use the timer to periodically query the width of the echarts outer div
AddEventListener always fails to load listener events to the echarts outer div
Therefore, you can add the addEventListener width in the outermost layer, save the change, then computed read the saved width in vuex, and then redraw the echarts when the watch global width variable changes.
But I still like the timer hahahaha
Timer:
- ClearTimeout = clearTimeout = clearTimeout = clearTimeout
- ClearTimeout = clearTimeout = clearTimeout = clearTimeout
- ClearTimeout = clearTimeout = clearTimeout = clearTimeout
Remember this:
Somefuntion () {clearTimeout(this.timer) this.timer = setTimeout(someFuntion, 30000) } destroyed () { clearTimeout(this.timer) }Copy the codeExplanation: The clear written before setTimeout() is just to ensure that only one of the current timers is on.
Clear the timer in the cache first, and then start a timer that will be executed once every 30 seconds. If there is still a timer after 30 seconds (generally, there is no timer), create a timer and start the cycle.
Instead of setInterval, it is recommended to use setTimeout only to delay execution once
8. The myChart object defines the difference between positions
MyChart = echarts.init(document.getelementById (this.id), ‘theme- myChart ‘)
data () {
return {
myChart: null
}
}
Copy the codeColleagues say this makes the vue object too big?? Don’t understand
However, my colleague suggested that myChart should be defined externally as follows:
let myChart = [] export default { methods: { echartsShow () { echarts.registerTheme('theme-mychart', chartTheme) myChart = echarts.init(document.getElementById(this.id), 'theme-mychart') }, EchartsResize () {// redraw like mychart.resize ()}}}Copy the codeThere is a problem with this, multiple Echarts components are imported under the same route, the later myChart will overwrite the previous one, resulting in the redrawing image can only operate the last myChart!
Finally, refer to the project team next door to put myChart under the same route into an array and define it externally. MyChart is a temporary variable. When redrawing, the number group can be traversed as follows:
let myChartArr = [] methods: { echartsShow () { echarts.registerTheme('theme-mychart', chartTheme) let myChart = echarts.init(document.getElementById(this.id), 'theme-mychart') // Clear the echarts cache mychart.clear () // Draw the image mychart.setoption (this.currentData) // Determine whether to add the mychart object let to the array replace = null for (let i = 0; i < myChartArr.length; i++) { if (myChartArr[i]._dom.id === this.id) { replace = i break } } if (replace ! == null) { myChartArr.splice(replace, 1, myChart) } else { myChartArr.push(myChart) } }, EchartsResize () {// redraw the chart for (let I = 0; i < myChartArr.length; i++) { if (this.id === myChartArr[i]._dom.id) { myChartArr[i].resize() break } } } }Copy the codeEcharts3 uses the character cloud wordCloud method
Error: Component Series. WordCloud not exists. Load it first.
Because Echarts3 no longer supports character cloud wordCloud, an additional introduction of echarts-wordCloud.js is required.
Introducing wordCloud methods in WebPack:
- 1. Go to the project root directory, run CMD, and run NPM install echarts-wordcloud –save
- Import ‘echarts-wordCloud’ where wordCloud is needed
At the same time, I copied the example from the official website and found that the color of the character cloud cannot be randomly changed!!
Website example:
Echarts.baidu.com/echarts2/do…
Note:
series: [{
......
data: [{
name: "Macys",
value: 6181,
itemStyle: createRandomItemStyle()
},
......
]
......
}]
Copy the codeWhen I print out the option, I find that the color of the itemStyle setting is ok. It’s different, but I can’t find how to set the color on the official website.
I found an example on Git later
Github.com/ecomfe/echa…
Note:
data: [{
name: 'Farrah Abraham',
value: 366,
// Style of single text
textStyle: {
normal: {},
emphasis: {}
}
}]
Copy the codeChange the original itemStyle to textStyle…
Ten, line chart animation effect problem
Option. animation = true controls how the line chart is animated when it is loaded. Default is true.
However, when the amount of data is too large, even if set to true, the animation effect will be lost.
11. Dynamic data addition effect
Modifying the data in the Series and redrawing the echarts will cause the animation to be redrawn from beginning to end.
For example, when data appends over time, redrawing the echarts will cause the animation to refresh from the first value to the last, which is a bad experience.
Refer to the official case:
Echarts.apache.org/examples/zh…
The key points are:
Do not recreate the echarts object, just setOption(newOption) to the original echarts object.
How to change the size of the icon in front of the hover frame in Echarts
Key code:
formatter: function (params) { var result = '' var dotHtml = '<span style="display:inline-block; margin-right:5px; border-radius:44px; width:44px; height:44px; background-color:#1ddae4"></span>' var dotHtml2 = '<span style="display:inline-block; margin-right:5px; border-radius:44px; width:44px; height:44px; ></span>' result += params[0].axisvalue + '</br>' + dotHtml + 'COD: '+ params[0].data + '</br>' + dotHtml2 + 'NH3:' + arams[1].data return result}Copy the codeThe effect is as follows:
Reference documents:
Blog.csdn.net/weixin_4221…