Don't say much, let's start with the renderings!
The frame rate is adjusted a little high, and the picture jumps as if it were reincarnated 😂😂， Please forgive me
If I happen to achieve something you need, please go inside - >
First of all, the whole content starts with the chart creation instance after the introduction of Echarts. If you just want to know the content of the corresponding part, please jump directly to the corresponding directory.
Instance creation -- canvas
First, there should be a container for charts in the page:
<div class="chart" ref="chart"></div>
You need to define its width and height. As for the style, it depends on your personal needs.
be careful:
There is nothing here. I don't define it. I use content to support this bullshit theory. There is no container, and your chart instances have no way~
Next, create an Echarts instance
Here we need to use Echarts' API: echarts. init
Specific use: let chart = echarts.init(this.$refs.chart);
Inside the brackets is the method to get dom elements, whether you use Id or class name, or use $ref like me, whatever you want.
be careful:
Cannot initialize multiple ecarts instances on a single container
Here, after the instance is created, it is equivalent to that we have bought the canvas, and then it is time to buy paint.
Defining data -- pigments
That is, the data of x-axis and y-axis can be defined directly or interface data can be used (this is dynamic).
The specific content is described in the configuration item - > > >
Configuration item -- brush
I won't introduce a single chart. What the official website says is more detailed than me:
Examples of single charts such as line charts, bar charts, pie charts, etc
Then I will introduce my implementation steps in blocks according to the effect diagram of the title:
One column displays multiple data (multiple series) - Series
This is set in the configuration item series:
Look at my implementation of the above code - >
series: [
{
name: 'Highest score',//Series name, used for displaying tooltip, legend filtering of legend, and specifying corresponding series when setOption updates data and configuration items
type: 'bar',//Chart type
barGap: 0,//Distance between columns of different series, in percentage
label: labelOption,//The text label on the graph can be used to describe some data information of the graph, such as value, name, etc. labelOption is defined by me, which is introduced below
emphasis: {
focus: 'series',//Focus on all figures of the series where the currently highlighted data is located
},
data: data1,//An array of data contents in the series. data1 is defined by me, because my data needs to be switched and changed, not fixed
},
{
name: 'Lowest score',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series',
},
data: data2,
},
{
name: 'average',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series',
},
data: data3,
},
],
See, this thing is the objects in the series array object. You can set a few and put them together.
As for the configuration items in series, please see the official website: Configuration items of series
In that sentence, the basic content of the official website is more detailed.
Of course, I'm very welcome to have ideas with you~
legend component that controls the display and concealment of multiple series - legend
On the top of the chart, click to turn gray, and this series of data will not be displayed in the chart.
Implementation code:
legend: {
data: ['Highest score', 'Lowest score', 'average'],//The name of the legend item should be equal to the name value of a series. It corresponds to the name attribute of each object in my series
},
The colors are used by default. It still depends on the official website:
Detailed introduction: Configuration items of legend
Use different charts to display the same data - toolbox
On the side, you can see the data view, switch the line chart, bar chart, stack chart, and save the chart as a picture.
The function looks old, but there are bug s.
During dynamic type switching, the activity is not very free to switch.
The specific problem is:
Histogram switching stack: normal Stack polylines: Y Axis scale will not change Broken line cut column: a stacked chart instead of a column chart appears Click stack again: stack activity is cancelled, and the histogram appears
I don't know if anyone has solved this problem. Anyway, I can't find a solution. I've already mentioned issues to Echarts. Let's see when it can be solved.
Code part:
toolbox: {
show: true,//Whether to display toolbar components.
orient: 'vertical',//The layout orientation of the toolbar icon.
left: 'right',//The distance from the toolbar component to the left side of the container.
top: 'center',//The distance from the toolbar component to the upper side of the container.
feature: {
mark: { show: true },
dataView: { show: true, readOnly: true, title: 'Data view' },//The data view tool can display the data used by the current chart, which can be dynamically updated after editing.
magicType: { show: true, type: ['line', 'bar', 'stack'], title: { line: 'Switch to line chart', bar: 'Switch to histogram', stack: 'Switch to stack' } },//Dynamic type switching
restore: { show: true, title: 'reduction' },//Configuration item restore.
saveAsImage: { show: true, title: 'Save as picture' },//Save as a picture.
},
},
Detailed introduction on the official website: Configuration items of toolbox
Multi sentence mouth. Previously, the prompt of Echarts' toolbar was in Chinese, but the current version generally prompts in English.
If you want a Chinese prompt, just name the configuration item in the feature of the toolbox: title.
Tips on graphics label
This is actually a configuration item in the series. It belongs to yes when it comes out alone.
Note that the configuration is the configuration. If you want to display it, you have to use it with tooltip.
Code part:
tooltip: {
trigger: 'axis',//Trigger type.
axisPointer: {
type: 'shadow',// Shadow indicator
},
},
let labelOption = {
show: true,//Whether to display labels.
rotate: 0,//Label rotation. From -90 degrees to 90 degrees. Positive values are counterclockwise.
position: ['50%', '50%'],//Location of the label.
align: 'center',//Text horizontal alignment, automatic by default.
verticalAlign: 'middle',//Text vertical alignment, automatic by default.
formatter: '{c}',//The label content formatter supports two forms: String template and callback function. The string returned by string template and callback function supports line feed.
fontSize: 16,//The font size of the text.
fontWeight: 'bolder',//The thickness of the text font.
rich: {
name: {},//In rich, you can customize rich text styles. Using rich text style, you can make very rich effects in labels
},
};
The data information display of charts is set here:
Detailed introduction on the official website:
Configuration item of tooltip
label configuration item of series
There are a lot of x-axis data, drag display - dataZoom
Code part:
dataZoom: [
{
type: 'slider',//Slider data area zoom component
show: showdatazoom,//Whether to display components.
start: 0,//The starting percentage of the data window range. The range is: 0 ~ 100. Means 0% ~ 100%.
end: 50,//The end percentage of the data window range. The range is: 0 ~ 100.
handleSize: 5,//The size of the control handle can be either the pixel size or the percentage relative to the width of the dataZoom component. By default, it is the same as the width of the dataZoom.
},
],
Detailed introduction on the official website: Configuration items of dataZoom
Well, I've introduced the whole chart in blocks. I'll post the complete code at the end of the article.
Next, let's talk about something different, that is, the problems I encountered in the process of using it.
Dynamic chart generation problem
You set other switches in this container to control the change of data.
At this time, the previously rendered charts will be replaced by new charts generated by new data.
Never choose to replace directly!!!
You will find that the new chart and the old chart are directly related and overlap...
Therefore, when rendering new charts, we should destroy the old charts.
This destruction is simple to say, but it is actually a bitter tear
I have made records before, and I want to know the direct steps: Problems encountered in chart switching display
That's what I don't want to see:
1. Save the created chart instance globally
2. Judge whether the chart instance already exists in the method triggered by data switching. If it exists, destroy it and call the method again. There is no direct call
Complete code
getChart() {
this.chart = echarts.init(this.$refs.chart);
// Put the configuration and data here
let labelOption = {
show: true,
rotate: 0,
position: ['50%', '50%'],
align: 'center',
verticalAlign: 'middle',
formatter: '{c}',
fontSize: 16,
fontWeight: 'bolder',
rich: {
name: {},
},
};
let datax = [];
let data1 = [];
let data2 = [];
let data3 = [];
let showdatazoom = false;//Controls whether the slider is displayed
if (this.chartData[0].gradeRanking) {
this.chartData.sort(function (a, b) {
return a.gradeRanking - b.gradeRanking;
});
}
this.chartData.forEach((item) => {
datax.push(item.departmentName);
data1.push(item.highestScore);
data2.push(item.lowestScore);
data3.push(item.averageScore);
if (item.gradeRanking && this.chartData.length > 5) {
showdatazoom = true;
}
});
//Here, let datax = []; It's all about my data processing. I don't delete it because the following data is useful, and the province is endless
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
data: ['Highest score', 'Lowest score', 'average'],
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: true, title: 'Data view' },
magicType: { show: true, type: ['line', 'bar', 'stack'], title: { line: 'Switch to line chart', bar: 'Switch to histogram', stack: 'Switch to stack' } },
restore: { show: true, title: 'reduction' },
saveAsImage: { show: true, title: 'Save as picture' },
},
},
dataZoom: [
{
type: 'slider',
show: showdatazoom,
start: 0,
end: 50,
handleSize: 5,
},
],
xAxis: {
type: 'category',
axisTick: { show: false },
data: datax,
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Highest score',
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series',
},
data: data1,
},
{
name: 'Lowest score',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series',
},
data: data2,
},
{
name: 'average',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series',
},
data: data3,
},
],
});
},