takeaway

ECharts is a graphical library for visual development of data. It is a graphical library for visual development of data.

ECharts is an open source visualization library using JavaScript, which can run smoothly on PC and mobile devices. It is compatible with most browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.), and relies on ZRender, the vector graphics library. Provide intuitive, interactive and highly customizable data visualization charts.


ECharts provides regular line chart, histogram, scatter plot, the pie chart, the chart, box for statistical charts, used for geographic data visualization map, heat map, chart, diagram for relational data visualization, figure treemap, the rising sun, multidimensional data visualization parallel coordinates, figure, with a funnel for BI dashboard, It also supports mash-ups between graphs. It can be said that the functions provided by ECharts greatly meet our needs in development. Recently, I was also in charge of front-end visual display in the company, and I also chose to develop based on ECharts. So I thought I’d write an article to provide a basic tutorial for those of you who haven’t heard of ECharts or just haven’t used ECharts. I’m sorry for my bad writing.

The introduction of ECharts

ECharts can be introduced in the following ways:

1. Choose the version you need to download from the download interface of the official website. We provide different packages of downloads according to the developer's requirements on functions and volume. The development environment recommends downloading the source code version, which contains common error prompts and warnings.Copy the code


2. Run NPM to obtain echarts. NPM install echarts --saveCopy the code


3. CDN introduction, you can find the latest version of ECharts on CDNJS, NPMCDN or domestic BOOTCDN.Copy the code


Draw a simple diagram

Start by creating a new HTML file and preparing a wide and tall DOM for ECharts

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <! ECharts --> <script SRC ="echarts.min.js"></script> </head> <body> <! Prepare a DOM with size (width and height) for ECharts --> <div id="main" style="width: 600px; height:400px;"></div>
</body>
</html>

Copy the code

You can then initialize an echarts instance using the echarts.init method and generate a simple bar graph using the setOption method. The complete code is shown below.

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <! ECharts --> <script SRC ="echarts.min.js"></script> </head> <body> <! Prepare a Dom with size (width and height) for ECharts --> <div id="main" style="width: 600px; height:400px;"></div>
    <script type="text/javascript"Var myChart = echarts.init(document.getelementById ())'main')); Var option = {title: {text:'Getting started with ECharts'
            },
            tooltip: {},
            legend: {
                data:['sales']
            },
            xAxis: {
                data: ["Shirt"."Cardigan"."Chiffon shirt."."Pants"."High heels"."Socks"]
            },
            yAxis: {},
            series: [{
                name: 'sales'.type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // Display the chart using the configuration items and data you just specified. myChart.setOption(option); </script> </body> </html>Copy the code

The effect is as follows:


Of course, this is also the most basic configuration. In actual development, we will develop it according to specific requirements. For example, we will modify a series of components such as X axis, Y axis, ToopTIP, Legend and so on.

The X axis

The X-axis of a rectangular coordinate system grid

1. XAxis. Show | Boolean whether show the X axisCopy the code
2. XAxis. Name | string name coordinate systemCopy the code
3. XAxis. NameLocation | string axis name display positionCopy the code
4. XAxis. NameTextStyle | Object coordinate the name of the text style xAxis. NameTextStyle. Color | string color xAxis. NameTextStyle. FontStyle | string Font style xAxis. NameTextStyle. FontWeight | string font weight xAxis. NameTextStyle. FontSize | number font color xAxis. NameTextStyle. Align | A string literal level alignment xAxis. NameTextStyle. BackgroundColor | string, The Object literal block background xAxis. NameTextStyle. BorderColor | string border color...Copy the code
5. XAxis. Inverse | Boolean whether inversionCopy the code
6. XAxis. MinInterval | number [defaule: 0] automatically calculates the axis of the minimum interval size, for example, can be set to 1 to ensure axes segmentation scale display into an integerCopy the code
7. XAxis. AxisLine | Object coordinate axis associated Settings xAxis. AxisLine. Show | Boolean whether display axis xAxis axisLine. Graphics.linestyle. Color | axis color string Settings XAxis. AxisLine. Graphics.linestyle. Width | number set axis widthCopy the code
8. XAxis. AxisTick | Object coordinate axis associated Settings xAxis. AxisTick. Show | Boolean whether display scale (that is, each small vertical lines)Copy the code
9. The xAxis. AxisLabel | Object coordinate axis associated Settings xAxis. AxisLabel. Show | Boolean whether xAxis. The calibration label axisLabel. Color | string set calibration label colorCopy the code

Here are some simple configurations


xAxis: {
    data: ["Shirt"."Cardigan"."Chiffon shirt."."Pants"."High heels"."Socks"],
    // show: false
    name: 'X-axis name',
    axisTick: {
        show: false
    },
    axisLine: {
        lineStyle: {
            color: 'red'
        }
    },
    axisLabel: {
        color: 'green'
    },
    nameTextStyle: { 
        fontWeight: 500
    }
}

Copy the code

The results are as follows, but can also be modified according to specific project requirements.

Y

The y axis of a rectangular coordinate system grid

The configuration of the Y axis is basically the same as that of the X axis, which is not described here


yAxis: {
    name: 'Y-axis name',
    axisTick: {
        show: false
    },
    axisLine: {
        lineStyle: {
            color: 'red'
        }
    },
    axisLabel: {
        color: 'green'
    },
    nameTextStyle: {
        fontWeight: 500
    },
    // minInterval: 1
}

Copy the code

The effect is as follows:

Legend component

The legend component displays different sets of symbols, colors, and names. You can control which series are not shown by clicking on the legend

1. Legend. Type | string type of legend. Optional value:'plain': Common legend. The default is a normal legend.'scroll': Scroll page turning legend. It can be used when the number of legends is large.Copy the code
2. Legend. Show | Boolean whether to show legendCopy the code
3. Legend. Width/height | number/width/height of legendCopy the code
4. Legend. ItemGap | the gap between the number of legendCopy the code
5. Legend. Received | string the layout of the legend list toward the optional:'horizontal'
'vertical'

Copy the code
6. Legend. ItemWidth/itemHeight number | tag number illustration graphics width/heightCopy the code
6. Legend. TextStyle | Object legend public text styleCopy the code

legend: {
    data: [Example of '1'.'legend 2'.'legend 3'],
    show: true,
    orient: 'vertical',
    right: 10,
    itemWidth: 20,
    itemHeight: 20,
    textStyle: {
        color: function (params) {
            let colorList = [
                "#5C89FF"."#FFCB48"
            ];
            return colorList[params.dataIndex];
        },
        fontSize: 12
    }
}

Copy the code

Results the following


tooltip

Prompt box component.

1. Tooltip. Show | Boolean if prompt dialogCopy the code
2. Tooltip. TriggerOn | string triggered prompt box trigger condition, optional: 1.'mousemove'Triggered when the mouse moves. 2.'click'Triggered when the mouse clicks. 3.'mousemove|click'Simultaneously mouse movement and click trigger. 4.'none'Not in'mousemove' 或 'click'Tooltip. ShowTip and action.tooltip. HideTip can be manually triggered and hidden. It can also be triggered or hidden with axisPointer.handle.Copy the code
3. Tooltip. BackgroundColor | string prompts the background color of the floating layer.Copy the code
4. Tooltip. BorderColor | string prompt box layer border color.Copy the code
5. Tooltip. BorderWidth | string prompt box layer border width.Copy the code
6. Tooltip. Padding | number prompt box floating layer of padding.Copy the code
7. Tooltip. TextStyle | string prompts floating text style.Copy the code

tooltip: {
    backgroundColor: '# 000000',
    textStyle: {
        color: 'yellow',
        fontWeight: 500
    },
    formatter: '{a} values of category {b} are {c}'
}

Copy the code

Results the following

grid

Drawing grid in rectangular coordinate system

dataZoom

Used for region scaling to allow free attention to data information in detail, or to overview the data as a whole, or to remove the effects of outliers.

title

A title component that contains the main title and subtitle.

Events

Event handlers are added in ECharts primarily through the ON method, and this document describes the list of events for all ECharts.

Here’s a quick example of adding code to code

this.myChart.on("click", (params) => {
    console.log(params);
});
Copy the code

With just a few lines of code, we can get the properties of the clicked chart

Let me show you an example of a real project in action

If you are interested in ECharts, you can try to implement it. In fact, there are many more functions of ECharts. What is said here is just some basic parts


So here are my thoughts on Echarts. If there are any mistakes, please correct them in the comments section. If this article helped you, please like 👍 and follow us at 😀.

summary

I hope you have achieved the following points after reading this article:

1. Know what Echarts is 2. Can you configure a diagram component that you wantCopy the code

Recommended reading

  • Oh, my god, this is inheritance!
  • An article to get baidu map basic operation

reference

Echarts