foreword
The new project is a WeChat applet. Due to the possibility of cross-terminal in the future and in order to reduce development costs, the uni-app framework was chosen for the development of the applet.
The project needs to display various charts on the applet. The powerful echarts is used on the web side, but since there is no official mobile version (there is a WeChat version developed with the WeChat team, but it cannot be cross-terminal), although There are various personal adaptations on the Internet, but there are more or less problems.
Therefore, after comprehensive consideration, the result of the final selection is to use ucharts, a mobile chart plug-in specially adapted for uni-app.
I won’t introduce much about ucharts here. This article mainly records various pits encountered during use.
The way this article uses ucharts is 组件工具.
In addition, there are actually some problems that the official documents provide corresponding solutions to, and the online configuration tool provided can also easily see the adjusted effect. Of course, this is charged, 30 yuan a year, 100 yuan for life. I won’t comment much on the charge. Different people have their own opinions. After all, there is no charge if you just use it. For the convenience of development, I will open it for a year.
1. After uchats opens canvas2d, the rendering position is wrong.
Let me talk about the conclusion first : the environment of the simulator and the real machine are different, so don’t worry about the location problem on the simulator, it’s normal on the real machine.
The canvas2d interface has better performance and supports same-layer rendering. The way to enable canvas2d in ucharts is to add it to the props of the component :canvas2d="true".
<qiun-data-charts :type="chartsShowType" :chartData="chartsData" :opts="opts" :ontouch="true" :canvas2d="true" :canvasId="canvasId" />
It should be noted that after opening canvas2d, it must be passed in canvasId, and it canvasIdis generally a random string, which cannot start with a number. The id here can be generated by randomly generating a string. (But in fact, ucharts officially built a method of randomly generating id inside the component. Even if you don’t pass the canvasId, it will be automatically generated internally, which saves some trouble. If you don’t have special needs, you can just don’t pass it directly)
After enabling this interface, in the emulator in the WeChat development tool, there is a problem with the positioning of the chart:
Good guy, can you see this? So I tried various changes, all to no avail.
Later, I found out through consulting the information that after the 2D mode of the canvas of the applet is turned on, because of the difference between the environment of the simulator and the environment of the real machine, the chart of ucharts will have penetration problems on the simulator, but the real machine is normal. Since the applet will eventually run on the real machine, it is recommended to ignore the penetration problem on the simulator. When you need to see the adjustment results on the simulator, you can temporarily turn off the 2d mode, and add it when you want to see the effect on the real machine.
2. After wrapped with scroll-view, the position of the prompt window is wrong.
If there is a need to display multiple charts vertically in the same case, it is natural to use the scroll-view component to achieve vertical scrolling, but after wrapping the encapsulated ucharts component with scroll-view, you will find that when you click on the chart There will be a problem with the judgment point. I clicked the line but clicked to the legend below... The
official document here provides a solution. If you use the native drawing method, you need to correct the coordinates yourself:
If the tooltip is not displayed or the display position is incorrect, it may be that the outer layer of the canvas is wrapped with sroll-view or swiper, or the parent element adopts fixed positioning, which causes the event of the touch event to be confused. Solution: To process the wrong event coordinates back to the correct click coordinates, you need to add or subtract part of the x and y coordinates in the event. The specific value can be calculated by removing the outer package and printing the event without removing the outer package. inferred
But if you use the component method, then the official packaged properties have been inScrollViewprovided to you, and you can solve the problem by using it directly, which
is very convenient:
<qiun-data-charts :type="chartsShowType" :chartData="chartsData"
:opts="opts":ontouch="true" :canvasId="canvasId" :inScrollView="true"/>
3. The line width of the line chart legend is too long, what should I do if I want to change it to a smaller point?
The default line width of the legend of the line chart is as follows:
the legend is a bit too long, and now there is a need to change it to a smaller size, but the corresponding interface is not provided in the official document, what should I do? What else can I do, I can only change the source code.
Find and open the file in the ucharts plugin directory u-charts.js, search for the legend drawing method globally function drawLegend, and jump to switch (item.legendShape)this snippet:
switch (item.legendShape) {
case 'line':
context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pix);
context.fillRect(startX, startY + 0.5 * lineHeight - 4 * opts.pix + 1, 10 * opts.pix, 6 * opts.pix);
break;
case 'triangle':
context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix);
context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * lineHeight + 5 * opts.pix);
context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * lineHeight + 5 * opts.pix);
context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix);
break;
case 'diamond':
context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix);
context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * lineHeight);
context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight + 5 * opts.pix);
context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * lineHeight);
context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix);
break;
case 'circle':
context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight);
context.arc(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight, 5 * opts.pix, 0, 2 * Math.PI);
break;
case 'rect':
context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pix);
context.fillRect(startX, startY + 0.5 * lineHeight - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix);
break;
case 'square':
context.moveTo(startX + 5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix);
context.fillRect(startX + 5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix, 10 * opts.pix, 10 * opts.pix);
break;
case 'none':
break;
default:
context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pix);
context.fillRect(startX, startY + 0.5 * lineHeight - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix);
}
It can be seen that this code draws the legend according to the graph type, so case 'line'it is a line graph. Let’s look moveTo()at fillRect()the method again. In fact, it is enough to directly change fillRect()the third parameter of the rectangle filling method, but if you only change here, the legend widthThe position of will be a bit crooked, so the starting point also needs to be adjusted. The code before and after adjustment is as follows:
Before adjustment :
context.moveTo(startX, startY + 0.5 * lineHeight - 2 * opts.pix);
context.fillRect(startX, startY + 0.5 * lineHeight - 2 * opts.pix, 15 * opts.pix, 4 * opts.pix);
After adjustment :
context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pix);
context.fillRect(startX, startY + 0.5 * lineHeight - 4 * opts.pix + 1, 10 * opts.pix, 6 * opts.pix);
How much to adjust can be adjusted slowly according to your own needs.
4. After the legend is placed on the chart, the X-axis text is not displayed completely (rotation is turned on) and the legend is covered by the data text
The problem phenomenon is shown in the figure below. This is easy to change. You can modify the margin directly by setting. The following code settings are for reference only. You can try the specific values yourself.
opts: {
padding: [15,10,5,15], // 画布填充边距[上,右,下,左]，Array格式，修改前为[15,10,0,15]
legend: {
margin: 10, // 图例外侧填充边距，默认为5
}
}
After modification:
In addition, here is a supplement to the method of changing the position of the legend relative to the chart. The following is an example of placing the legend on the top (in fact, it is written in the official document):
opts: {
legend: {
position: "top"
}
}
5.ucharts added dynamic switching chart type
What I didn't expect is that ucharts does not support dynamic switching of chart types...
so I have no choice but to change the source code by myself.
Since opts and chartsData can be updated dynamically, according to the guidelines in the official document, dynamic update is realized through the watch option, so open it qiun-data-charts.vueand jump to this section watchof the option :optsProps
optsProps: {
handler(val, oldval) {
if (typeof val === 'object') {
if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === false && this.optsWatch == true) {
this.checkData(this.drawData);
}
} else {
this.mixinDatacomLoading = false;
this._clearChart();
this.showchart = false;
this.mixinDatacomErrorMessage = '参数错误：opts数据类型错误';
}
},
immediate: false,
deep: true
},
The key code is this.checkData(this.drawData);that this is used to redraw the chart. If you want to change the type dynamically, you need to monitor the properties of the changed type for a long time type. Since the value passed in is a string, it is enough to judge whether the values before and after are consistent. code show as below:
type: {
hanlder(val, oldval) {
if (val !== oldval) {
this.checkData(this.drawData);
}
}
}
At this point, you can dynamically switch the chart type. If you want to add some judgment or other requirements, you can change it based on this.
PS: If the above code is invalid, you can try the following:
type(val, oldval) {
if (val !== oldval) {
this.checkData(this.drawData);
}
}
The two writing methods are actually the same, but I don’t know why the first writing method does not work.
6. The ucharts chart cannot be dragged horizontally
According to the official documentation, to enable horizontal dragging, you need to set the following two points:
- opts.enableScroll=true;
opts: {
enableScroll: true
}
- set ontouch to true on the component
<qiun-data-charts
type="column"
:opts="opts"
:chartData="chartData"
:ontouch="true"
/>
After setting up and running, I found that although the scroll bar appeared, it could be dragged normally on the simulator, but the real machine debugging could not be dragged anyway.
If this happens to you, it is mostly because the view container is placed outside the component scroll-view. If this is the case, you can try to set the property scroll-x to true on the scroll-view container, which should solve this problem.
<scroll-view scroll-x="true"></scroll-view>
7. Added the function of horizontal screen display of charts
Due to the limitation of the width of the mobile phone screen, when the amount of data is large, the viewing experience is not very good, so the function of horizontal screen display is necessary. Fortunately, ucharts officially provides the function of horizontal screen display, which can save you from manually modifying Trouble, but still need to pay attention to some places when implementing.
For details, see: Use ucharts to add the function of chart horizontal screen display in the applet
8. How to add the function of pull-down display/scroll left and right in ucharts
When there are many data items, there will be a lot of legends displayed. Since the screen of the mobile device is relatively small, and the default is to view it vertically, this will cause the chart below to be severely compressed, as shown in the figure below (the middle of the picture There is a strange arrow, ignore it for now)
A better way is to add the function of legend drop-down display/scroll left and right. Since there are many things involved in this piece, it is relatively difficult, so I will write a separate blog post later Explain the solution idea and specific code in detail, and then link here. Here is a preview.