Using Echarts to realize the attention points of a chart item

This article brings you the content is about the use of echarts to achieve the attention point of the chart project, there is a certain reference value, the need for friends can refer to, I hope to help you.

Recently, I've done a chart project that uses Echarts. Because of the limited ability to understand APIs, it is not unimpeded to use them.
The so-called good memory is inferior to bad writing, now some of the more critical points recorded for follow-up review.

One use method

Project: Ionic+angular4+echarts

    1. Due to packaging reasons, echarts can not be directly introduced into the Package.json dependencies, only in the original way from index.html to introduce    <script src= "assets/js/ Echarts.min.js "></script>    2. In the. html file of the component    <div echarts [options]=" Pieoption "(chartclick) =" Jump2detail ($event) "></div>    3. Configure the options value in the. ts file for the component pieoption and click Drill down logic

Two points of attention

1. Each render area has a position setting that allows you to customize the distance from the top, bottom, left, and right

    grid:{        Top:        ... Left:        ... Bottom:        ... Right: ...    }        legend:{        Top:        ... Left:        ... ...    }

2. Each display point that deals with values basically provides a formatter

tooltip:{        formatter:params =//Custom hover status data display let            str = ';            str + = ' 

3.xaxis/yaxis Some property ticks, axis names, and how to display coordinate information for an axis

4.toolbox toolbar with exported image, Data View, dynamic type Toggle, data region zoom, reset 5 Tools
The exported image can be used to guide multiple graphs through the relevant API of the canvas.

5.dataZoom data Region scaling component--can be one or more

datazoom:[    {        type: ' inside ',//built in coordinate system with mouse wheel or finger touch to punish ...    },    {        type: ' Slider ',//Outside A component that appears as a sliding bar that can be dragged directly using ...    }]
6.series Series list, each series determines chart type by type--injects data in different formats according to different charts

series:{    type: ' line '/' pie '/' bar '/' TreeMap ',    ...}
In fact, each chart is subdivided into a number of subtle settings, data and color, spacing, etc., to be continued ...