ECharts Case study 1, echarts Case Study

ECharts Case study 1, echarts Case Study
Front-end development whqet, csdn, Wang haiqing, whqet, front-end development expert

Get up in the morning and wander around codops. In its Web Design & Development News: Collective #149 | Codrops found the data visualization tool Echarts from Baidu. It seems to be powerful and I tried to learn it myself, by the way, let's sort out a series of articles on the Echarts case study!

------------------------------------------------------------

-- I participated in the blog Star Selection. If you like my blog, please vote. Your support is the source of my motivation. Let's get started!

Bytes -----------------------------------------------------------------------------------------

Introduction

ECharts, abbreviated to "Enterprise Charts", is an open-source data visualization tool of Baidu, which has been widely praised by the industry. If you need to learn more, refer to the official website. After a brief introduction, the most appropriate part is the Localization support, for example, the support for map China.

Scenario 1 simple bar chart = case 1 simple bar chart = case 2 bar chart, line chart combination = simplified bar chart

First, let's look at the simplest case to implement a bar chart. I put the code in codepen. You can preview the results first.

Prepare a webpage element with a width and height. We will use it to draw data tables.

<div id="main" style="width:600px;height:400px"></div>

Then we import the Echarts class library and make preparations.

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

Next, let's draw the data table. First configure the path and then use Echarts to start the drawing.

// Configure require in the path. config ({paths: {echarts: 'http: // echarts.baidu.com/build/dist'}); // use require (['echarts', 'echarts/chart/bar ', // use a bar chart to load the bar module as needed], function (ec) {// initialize the echarts chart var myChart = ec based on the prepared dom. init (document. getElementById ('main'); // sets the data var option ={}; // loads the data myChart for the echarts object. setOption (option );});

The focus is on setting in option, setting the coordinate axis and setting data.

Var option = {// set coordinate axis xAxis: [{type: 'category ', data: ["shirt", "sweater", "chiffon shirt", "Pants ", "High Heels", "so", "hat", "Scarf"]}], yAxis: [{type: 'value'}], // set data series: [{"name": "sales", "type": "bar", "data": [5, 20, 40, 10, 24, 20, 24, 32],}]};

You can set the icon title, legend, and prompt, as shown in the following code.

Var option = {// set the title: {text: 'sales dashboard 'and subtext:'. It is purely fabricated. If there is a similar title, the character will pop up. '}, // The prompt tooltip: {show: true} is displayed. // set the legend: {data: ['sale']}. // set the coordinate axis xAxis: [{type: 'category ', data: ["shirt", "sweater", "chiffon shirt", "Pants", "high heels", "so", "hat ", "Scarf"]}], yAxis: [{type: 'value'}], // set data series: [{"name": "sales", "type ": "bar", "data": [5, 20, 40, 10, 24, 20, 24, 32],}]};

==================================== OK, gorgeous split line, then I want to add some complicated ================================

Combination of bar chart and line chart

Add some materials, mix and match incoming calls, add a bar chart to the line chart, draw the average line at the same time, and prompt the maximum and minimum values. Similarly, place the code in codepen to preview the effect first.

When we need to mix and match, we need to first load the required image library in require, and then fill in the line chart data in series. The Code is as follows, because the comments have been clearly written, so we will not be so embarrassed. We will study the Code directly.

// Configure require in the path. config ({paths: {echarts: 'http: // echarts.baidu.com/build/dist'}); // use require (['echarts', 'echarts/chart/bar ', // use a bar chart to load the bar module, and load 'echarts/chart/Line'], function (ec) {// Based on the prepared dom, initialize echarts chart var myChart = ec. init (document. getElementById ('main'); // set the data var option = {// set the title: {text: 'sales dashboard ', subtext:'. It is purely fabricated, character explosion. '}, // The prompt tooltip: {show: true} is displayed. // set the legend: {data: ['sale']}. // set the coordinate axis xAxis: [{type: 'category ', data: ["shirt", "sweater", "chiffon shirt", "Pants", "high heels", "so", "hat ", "Scarf"]}], yAxis: [{type: 'value'}], // set data series: [// bar chart {"name": "sales ", "type": "bar", "data": [5, 20, 38, 10, 24, 20, 24]}, // line chart {"name ": "sales", "type": "line", "data": [5, 20, 38, 10, 24, 20, 24, 32], // draw the average markLine: {data: [{type: 'average', name: 'average'}]}, // draw the highest lowest point markPoint: {data: [{type: 'max ', name: 'maximum '}, {type: 'Min', name: 'Minimum'}]}; // load data myChart for the echarts object. setOption (option );});

Well, it will take a long time. We will study it again next time.

----------------------------------------------------------

Front-end development whqet, pay attention to web Front-end development, share related resources, welcome to likes, welcome to shoot bricks.
Bytes ---------------------------------------------------------------------------------------------------------