Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "what are the knowledge points of ECharts", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what are the knowledge points of ECharts" can help you solve your doubts.

Brief introduction

ECharts (Enterprise Charts, business-grade data chart) is an open source data visualization tool for Baidu. The bottom layer is based on ZRender (a new lightweight canvas class library). It can be more convenient for line chart, bar chart, scatter chart, K chart, pie chart, radar chart, map, chord chart, force-oriented layout chart, dashboard and funnel chart, while supporting the stacking of any dimension and the mixed display of multi-charts.

Knowledge reserve 1. Tagged single file is introduced into Echarts.

It is officially recommended that there are three ways to introduce ECharts: modular package introduction, modular single file introduction and label single file introduction. The first blog post introduces a modular single file, which can be loaded on demand and is officially recommended. In this article, we will use the tag single file introduction way, if your project is not based on modular development, but also not based on the AMD specification, then using the tag single file approach will be very convenient, we only need to use the script tag to introduce an ECharts library, single files that can be introduced include: dist/echarts-all.js and source/echarts-all.js. The former has been compressed, including full charts, including world,china and 34 provincial and municipal map data, while the latter is not compressed, including full charts, including world,china and 34 provincial and municipal map data, which can be used for debugging.

two。 The use of timeline controls.

Using the timeline control, we need to prepare from two aspects, one is to set the timeline, and the other is to set each time point (data, title, etc.).

Set the Timeline. The timeline is set with timeline in ECharts, and each icon can only have at most one timeline, below the main parameters.

Group parameter type default value meaning parameter setting dataArray [] timeline list, and also axis label content showbooleantrue display policy. Optional: true (Show) | false (Hidden) typestring'time' mode is a time type. The timeline interval is calculated according to the time span. It can be selected as: whether to perform merge operation when switching multiple option on the number'notMergebooleanfalse timeline. Same as the second parameter of setOption (see example method) realtimebooleantrue drag or click to change the timeline is displayed in real time. In readers that do not support Canvas, this value is automatically forced to be set to false playback control whether the autoPlaybooleanfalse is automatically played, playIntervalnumber2000 playback interval currentIndexnumber0 current index position, corresponding to the options array, used to specify the display specific series style setting widthnumber | string adaptive timeline width, default is the total width-x-x2 X2 will be ignored when width is specified. Heightnumber | string50 timeline height xnumber | string80 timeline upper left Abscissa ynumber | stringnull timeline upper left ordinate, default none, with y2 positioning, x2number | string80 timeline lower right Abscissa y2number | string0 timeline lower right ordinate paddingnumber | Array5 inner margin, unit px, accept the array to set the upper right, lower right and left margin, same as css. BackgroundColorcolor'rgba 'background color, acquiesced in transparency. BorderWidthnumber0 frame lineweight borderColorcolor'#ccc' border color controlPositionstring'left' playback controller position, optional: 'left' |' right' | 'none'lineStyleObject see Code Timeline Axis style, lineStyle controls Line style, (see lineStyle for details) labelObject see Code Timeline label text checkpointStyleObject see Code Timeline current Point controlStyleObject see Code Timeline Controller style, normal and highlighted colors symbolstring'emptyDiamond' Pivot Point symbol, same as serie.symbolsymbolSizenumber4 Pivot Point symbol Same as serie.symbolSize

Note:

A few years ago. Width, height, x, x2, y, y2, etc. set the size and position parameters of type number | string. You can accept numeric values in px or percentages (strings). For example, 50% indicates centered display.

Baggage. The default value of lineStyle is {color:'# 666mm, width: 1, type: 'dashed'}

Cymbals. The default value of label is shown in the code. The parameters explain the following

Show: does it show

Interval: pick interval. Default is' auto',. Optional: 'auto' (auto-hide display) | 0 (show all) | {number}

Rotate: rotation angle, default is 0, no rotation, positive value is counterclockwise, negative value is clockwise. Optional: ⑼ 0-90

Formatter: interval name formatter: {string} (Template) | {Function}

TextStyle: text style (see textStyle for details)

{show: true, interval: 'auto', rotate: 0, formatter: null, textStyle: {color:' # 333'}}

Dracula. The parameters of checkpointStyle are explained below, and the default values are shown in the code.

Symbol: current point symbol, default symbol on the axis

SymbolSize: current point symbol size, default symbol size along the axis

Color: current point symbol color. Default is with the current point color. You can specify a specific color. If not, it is'# 1e90ff.'

BorderColor: current point symbol border color

BorderWidth: current point symbol border width

Label is the same as c

{symbol: 'auto', symbolSize:' auto', color: 'auto', borderColor:' auto', borderWidth: 'auto', label: {show: false, textStyle: {color:' auto'}

E-mail. The default value of controlStyle is

{normal: {color:'# 333'}, emphasis: {color:'# 1e90ff'}}

The effect of style parameters on the timeline is shown in detail in the following figure.

Set each point in time. The second step is to set each specific time point, each time point is an icon, including title, legend, axis, data, etc., although the general axis, legend and so on remain unchanged, only change the title and data.

Var option = {/ / Timeline setting timeline: {}, / / time step setting options: [/ / first time point {}, / / second time point {}, / /...]} implementation process

Then let's interpret the implementation process.

In the timeline, we set a timestamp to display only the year; adjust the position of the timeline to ensure beauty; and set the timeline playback settings.

Var option = {

/ / Timeline setting timeline: {

/ / Timeline time list data: ['2002-01-01-01 / 2003 / 01 / 01 / 2004 / 01 / 01 / 2004 / 2006 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 2004 / Timeline time list: [' 2003-01-01-01 / 2004-01-01 / 2004-01-01 / 2004-01-01 / 2004]

/ / Custom processing, showing only the year label: {formatter: function (s) {return s.slice (0,4);}}

/ / the position of the timeline is set to height:80, XRV 50, padding: [40 Magne10, 10 10, 10]

/ / Timeline playback control autoPlay: true, playInterval: 2000}

/ / time step setting options: [/ / first time point {}, / / second time point {}, / /...]}

Then set the time point, first look at the 2012 data settings, we set the title, prompts, legends, axes, and draw data lines.

Var option = {/ / timeline setting timeline: {/ / timeline time list data: ['2002-01-01-01 / 01 / 2003 / 01 / 01 / 2004 / 01 / 01 / 2005 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 2005 / Timeline setting formatter: / / Timeline setting formatter: / / Timeline setting Timeline data: [2004-01-01-01 Timeline time list data: [' 2004-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01- }, / / timeline position setting height:80, XautoPlay 50, padding: [40 options 10 10], / / timeline playback control autoPlay: true, playInterval: 2000}, / / time point setting options: [/ / 1st time point / / 2002 data sheet, new content {title: {text:' 2002 goods sales chart', subtext:' is pure fabrication, if there are similarities, personality outbreaks.' }, / / set prompt tooltip: {show: true}, / / set legend legend: {data: ['sales']}, / / set axis xAxis: [{type: 'category', data: ["shirt", "cardigan", "chiffon", "trousers", "high heels", "socks", "hat", "scarf"], axisLabel: {margin: ⑵ 0, textStyle: {color:'#999' FontWeight:'bold'}], yAxis: [{type:' value'}], series: [{type:'line', data: [5,20,38,10,24,20], / / draw the average line markLine: {data: [{type:' average', name: 'average'}]}, / / draw the highest and lowest point markPoint: {data: [{type:' max' Name: 'maximum'}, {type: 'min', name:' minimum'}]}]}, / / 2nd time point {}, / /...]}

Other time points only need to be set in a different place in 2002. in this example, we only set the title and data table.

Var option = {/ / timeline setting timeline: {/ / timeline time list data: ['2002-01-01-01 / 01 / 2003 / 01 / 01 / 2004 / 01 / 01 / 2005 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 01 / 2005 / Timeline setting formatter: / / Timeline setting formatter: / / Timeline setting Timeline data: [2004-01-01-01 Timeline time list data: [' 2004-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01-01- }, / / timeline position setting height:80, XautoPlay 50, padding: [40magentin 10jie10], / / timeline playback control autoPlay: true, playInterval: 2000}, / / timeline setting options: [/ / 1st time point / / 2002 data sheet {title: {text:' 2002 goods sales chart', subtext:' is pure fabrication, if there are similarities, character outbreaks.' }, / / set prompt tooltip: {show: true}, / / set legend legend: {data: ['sales']}, / / set axis xAxis: [{type: 'category', data: ["shirt", "cardigan", "chiffon", "trousers", "high heels", "socks", "hat", "scarf"], axisLabel: {margin: ⑵ 0, textStyle: {color:'#999' FontWeight:'bold'}], yAxis: [{type:' value'}], series: [{type:'line', data: [5,20,38,10,24,20], / / draw the average line markLine: {data: [{type:' average', name: 'average'}]}, / / draw the highest and lowest point markPoint: {data: [{type:' max' Name: 'maximum'}, {type: 'min', name:' minimum'}}]}, / / 2nd time point / / 2003 data table The new content {title: {text:' 2003 goods sales chart', subtext:' is a pure fabrication, if there are similarities, character outbreaks.' }, series: [{type:'line', data: [10, 20, 36, 18, 26, 16 record20 type:'line', data 34], / / draw the average line markLine: {data: [{type:' average', name: 'average'}]}, / / draw the highest and lowest point markPoint: {data: [{type:' max', name: 'maximum'}, {type:' min' Name: 'minimum'}]}}, / / 3rd time point {}, / /...]} read here This article "what are the knowledge points of ECharts" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.