FrontEnd is a step-by-step upgrade: Echart Quick Start ~, Frontendechart

FrontEnd is a step-by-step upgrade: Echart Quick Start ~, Frontendechart

Introduce echart

<script src="../js/echarts.js"></script>

Of course, there are three ways to introduce the official document: Click here to me ~

Officially, the script tag should be placed at the end of the body. If you want to put it in the head, no problem.

Register the initialization function in window. onload:

window.onload = init;function init() {    initChart();}

Now we have a global variable require.

Prepare DOM

<! -- Div has a height ~ Echart self-adaption, of course, high point of good-looking --> <div id = "main" class = "chart-container"> </div>

Chart type:

• Line
• Bar
• Scatter
• K
• Pie
• Radar
• Chord
• Force
• Map
• Gauge
• Funnel
• EventRiver

Write a function for configuring require

Function requireConfig () {require. config ({paths: {echarts: '../js'}); // This annotation is convenient for future use ~~ // Require (// [// 'echarts', // 'echarts/chart/bar' // use a bar chart to load the bar. Refer to the above icon type //], // function (ec) {// initialize the echarts chart // var myChart = ec based on the prepared dom. init (document. getElementById ('bar'); // change the id to your own // var option = //!!!! There are many instances on the official website that provide option directly. copy it and change it to your own. /// // Load data for the echarts object // myChart. setOption (option );//}//);}

Line chart implementation:

Function line () {if (! Document. getElementById ('main') return; requireConfig (); // use require (['echarts', 'echarts/chart/line' // use a bar chart to load the bar module, load as needed], function (ec) {// initialize the echarts chart var myChart = ec based on the prepared dom. init (document. getElementById ('main'); var option = {title: {text: 'analytics ',}, tooltip: {trigger: 'axis'}, legend: {selected: {'visitor count (UV) ': false, 'IP number': false, 'number of entry pages': false, 'contribution downstream pages': false, 'number of exit pages ': false, 'average stay duration ': false, 'exit rate': false}, data: ['page views ', 'number of visitors (UV)', 'IP number ', 'entry page times', 'contribution downstream viewers', 'exit page times', 'average stay time', 'exit rate']}, toolbox: {show: true, feature: {mark: {show: true}, dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line ', 'bar', 'stack', 'tid']}, restore: {show: true}, saveAsImage: {show: true }}, calculable: true, xAxis: [{type: 'category ', boundaryGap: false, data: ['2017-02-11', '2017-02-13 ', '2017-02-15', '2017-02-17 ', '2017-02-19 ', '2017-02-21', '2017-02-23 ', '2017-02-25', '2017-02-27 ', '2017-03-01 ', '2017-03-03 ', '2017-03-05', '2017-03-07 ', '2017-09', '2017-03-11 ',]}], yAxis: [{type: 'value'}], series: [{name: 'page views ', type: 'line', smooth: false, itemStyle: {normal: {areaStyle: {type: 'default' }}, data: randomJSONObjN (15)}, {name: 'visitor count (UV) ', type: 'line', smooth: false, itemStyle: {normal: {areaStyle: {type: 'default' }}, data: randomJSONObjN (15)}, {name: 'IP number', type: 'line', smooth: false, itemStyle: {normal: {areaStyle: {type: 'default' }}, data: randomJSONObjN (15)}, {name: 'entry page Times ', type: 'line', smooth: false, itemStyle: {normal: {areaStyle: {type: 'default' }}, data: randomJSONObjN (15)}, {name: 'contribution downstream viewers', type: 'line', smooth: false, itemStyle: {normal: {areaStyle: {type: 'default' }}, data: randomJSONObjN (15)}, {name: 'number of page exits ', type: 'line', smooth: false, itemStyle: {normal: {areaStyle: {type: 'default' }}, data: randomJSONObjN (15)}, {name: 'average stay duration ', type: 'line', smooth: false, itemStyle: {normal: {areaStyle: {type: 'default' }}, data: randomJSONObjN (15)}, {name: 'exit rate', type: 'line', smooth: false, itemStyle: {normal: {areaStyle: {type: 'default' }}, data: randomJSONObjN (15)},]}; // load the data myChart for the echarts object. setOption (option );});}

The only note: data requires a json object ~~