【 ECharts 】 Echarts comprehensive application case – making large screen project

It mainly summarizes the principle of large screen production, echarts theme customization, echarts common map drawing, using Baidu map in Echarts

The effect

The production principle of large screen

1. Big screen is the web page to be displayed on the big screen; 2. Large screens are usually placed in public Spaces to display data; 3. The size of large screen is generally 1920*1080; 4. Big screens don't matter browser compatibility, as long as Google is compatible. 5. The principle of creating a large screen is to create multiple Echarts containers in the browser and put different Echarts charts into them;Copy the code

Large screen adaptation

www.jianshu.com/p/b2fd58d31…

The implementation process

1. Background frame

This part of the code is omitted.

2. Echarts theme customization

Echarts.apache.org/zh/theme-bu… Click the download theme button on the left to download the JS file (or JSON file). Take js as an example:

<! - introduce echarts -- -- >
<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
<! -- Introducing styles -->
<script src="./js/walden.js"></script>
Copy the code

Example :(each chart needs to be set later)

const chart = echarts.init(document.getElementById('chartL1'),'walden');
Copy the code

3. Chart implementation

3.1 the line chart

/*chartL1 - line graph */
{
    /* Data source */
    const source=[
        ['years'.'2014'.'2015'.'2016'.'2017'.'2018'.'2019'.'2020'],
        ['income'.820.932.901.934.1290.1330.1520],
        ['spending'.200.632.601.634.850.1000.1100]]./* Instantiate echarts
    const chart = echarts.init(document.getElementById('chartL1'),'walden');
    /* Configuration item * title * text 'Xihong City people's income growth' * dataset * source data source * xAxis * type * category axis * boundaryGap * Rotate axisLabel rotation Angle * yAxis * type * value value axis * series series collection * type series type, For example, the line * seriesLayoutBy column maps * column to the column of the dataset, and * row to the row of the dataset * * */
    const option = {
        title: {text:'People's Income growth in Xihong City'.left:'center'
        },
        legend: {top:30},
        dataset:{
            source
        },
        xAxis: {type:'category'
        },
        yAxis: {type:'value',},series: [{type:'line'.seriesLayoutBy:'row'},
            {type:'line'.seriesLayoutBy:'row'}]};/* Display the chart */
    chart.setOption(option);
}
Copy the code

3.2 the pie chart

/*chartL2 - pie chart */
{
    /* Data source */
    const source=[
        {value:5000.name:'travel'},
        {value:4500.name:'diet'},
        {value:6500.name:'clothes'},
        {value:3500.name:'movie'},
        {value:2500.name:'other'}];/* Instantiate echarts
    const chart = echarts.init(document.getElementById('chartL2'),'walden');
    /* Configuration item * title * text 'Xihong city people's consumption ratio' * tooltip * formatter Such as '{d}%' * dataset * source data source * series collection * type series type, such as pie * radius * roseType Nightingale chart * center center * */
    const option = {
        title: {text:'Ratio of People's Expenditure on Food, Clothing, Housing and Transportation in Xihong'.left:'center'
        },
        tooltip: {// formatter:'{d}%',
            formatter:({percent}) = >{
                return Math.round(percent)+The '%'
            },
            // formatter:'{b}%',
        },
        dataset:{source},
        series: {name:'Expenditure ratio'.type:'pie'.center: ['50%'.'58%'].roseType:'radius'.radius: ['40%'.'70%']}};/* Display the chart */
    chart.setOption(option);
}
Copy the code

3.3 a scatter diagram

/*chartL3 - scatter graph */
{
    /* Instantiate echarts
    const chart = echarts.init(document.getElementById('chartL3'),'walden');

    * / / * dimensions
    const dimensions=['income'.'age'.'population'.'address'.'time'];

    /* Configuration item */
    const option = {
        /* * * title * text main title, such as' Xihong city people's income and age '* * left left aligned * */
        title: {text:Relationship between People's Income and Age in Xihong City.left:'center'
        },
        tooltip: {},/* * coordinate axis * type Coordinate axis type * value Value axis, applicable to continuous data * name Coordinate axis name * */
        xAxis: {type:'value'
        },
        yAxis: {type:'value'
        },
        /* * dataset * dimensions map [] * string, such as' age ', equal to {name: 'age '} * source data source * */
        dataset:{
            dimensions
        },

        / * * * * type series series set chart type scatter scatterplot * symbolSize scatter size * encode encoding mapping * x x coordinate dimensions, such as 1 | 'age' * y y coordinate dimension map, Such as 0 | 'income' * tooltip suggested mapping, such as [0, 1] * itemStyle projects opacity style * * * / transparency
        series: {type:'scatter'.encode: {x:1.y:0.tooltip: [0.1.2.3.4]},symbolSize:3.itemStyle: {opacity:0.5}}};/* Asynchronously request data */
    fetch('./lib/table.json')
        .then((res) = > res.json())
        .then(data= > {
            option.dataset.source=data
            chart.setOption(option)
        });

}
Copy the code

Figure 3.4 radar

/*chartR1 - */
{
    / * * / data
    const data=[
        {
            name : 'Budget allocation'.value : [43000.45000.42000.45000.40000.49000],}, {name : 'Actual cost'.value : [30000.34000.55000.35000.32000.31000],}];/* * radar * indicator [] * name * min, Max The actual data will calculate the ratio * color label color * Shape radar shape * polygon polygon, default * circle * * */
    const indicator=[
        { name: 'sales'.min:0.max:60000},
        { name: 'management'.min:0.max:60000},
        { name: 'Information Technology'.min:0.max:60000},
        { name: 'customer service'.min:0.max:60000},
        { name: 'development'.min:0.max:60000},
        { name: 'the market'.min:0.max:60000}];/* Instantiate echarts
    const chart = echarts.init(document.getElementById('chartR1'),'walden');

    /* Configuration item */
    const option = {
        /* * * title * text Main title, such as' Xihong city financial expenses' * */
        title: {text:'Financial Expenses of Xihong City',},/* * Tooltip * */
        tooltip: {},/*legend * data, e.g. [' budget allocation ', 'actual cost '] * Orient * vertical * horizontal, default * left margin, e.g. 0 * top margin, e.g. 32 * */
        legend: {data: ['Budget allocation'.'Actual cost'].left:'left'.top:30.orient:'vertical'
        },


        /* * Radar * indicator[] Radar * */
        radar:{
          indicator
        },

        /* * series * type * radar * data * */
        series: {type:'radar',
            data
        }
    };
    // Display the chart using the configuration items and data you just specified.
    chart.setOption(option);
}
Copy the code

3.5 bar charts

/*chartR2 - bar graph */
{
    /* Data source */
    const source=[
        ['time'.'wheat'.'corn'.'the sorghum'],
        [2017.1000.800.900],
        [2018.500.650.800],
        [2019.800.900.1200]];/* Instantiate echarts
    const chart = echarts.init(document.getElementById('chartR2'),'walden');

    /* Configuration item */
    const option = {
        /* * * title * text main title, such as' Xihong City crop yield '* */
        title: {text:Crop Harvest in Xihong City.left:'center'
        },
        tooltip: {},legend: {top:30
        },
        grid: {top:72.bottom:28
        },
        /* * dataset * source * */
        dataset:{source},

        /* xAxis * type * category * yAxis * type * value Value */
        xAxis: {type:'category'
        },
        yAxis: {type:'value'
        },

        /* * series series collection * type chart type * bar bar * color color * image image source * Way to repeat an image, such as repeat * */
        series:[
            {id:'xm'.type:'bar'},
            {id:'ym'.type:'bar'},
            {id:'gl'.type:'bar'}]}; chart.setOption(option);/* Image source */
    / / wheat
    const imgXm=new Image();
    imgXm.src='./images/xm.jpg';
    / / corn
    const imgYm=new Image();
    imgYm.src='./images/ym.jpg';
    / / sorghum
    const imgGl=new Image();
    imgGl.src='./images/gl.jpg';

    // Draw after all images have been loaded successfully
    Promise.all([imgPro(imgXm),imgPro(imgYm),imgPro(imgGl)]).then(() = >{
        / / drawing
        chart.setOption({
            series:[
                {
                    id:'xm'.color: {image:imgXm
                    }
                },
                {
                    id:'ym'.color: {image:imgYm
                    }
                },
                {
                    id:'gl'.color: {image:imgGl
                    }
                },
            ]
        });
    });
    // Create a Promise object, specify that after img loads successfully, execute resolve
    function imgPro(img){
        return new Promise((resolve) = >{
            img.onload=function(){ resolve(img); }}); }}Copy the code

3.6 map (map)

Need to introduce baidu Map API and BMAP component console -> Application Management -> My application

<! -- Introduce baidu Map API --><script src="Https://api.map.baidu.com/api?v=3.0&ak= < your ak >"></script><! -- Import bmap component --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
Copy the code

/*chartR3 - Baidu map */
{
    const chart = echarts.init(document.getElementById('chartR3'),'walden');

    const option = {
        /* * * title title * text Main title, such as' where is Sihong city '* left left alignment * top distance, such as 12 * */
        title: {text:'Air Quality in Xihong'.left:'center'.top:12,},/* * bmap baidu map * center[latitude, longitude] map center, such as [121.48, 31.22] * zoom level, In 6 * roam, you can drag and scale mapStyleV2 map style * styleId styleId * Personalization on baidu map editor ((http://lbsyun.baidu.com/customv2/editor/c7162446b3c9506b18bdb9478cb2b0d0)) released after style id * * /
        bmap: {center: [121.48.31.22].zoom:6.roam:true.//mapStyleV2: {
             // styleId:< your styleId>
            / /}
        },

        /* Series list * Type Series type * Scatter * effectScatter * coordinateSystem coordinate type, bMAP * Data * symbolSize * */
        series: [{id:'s1'.type:'scatter'.coordinateSystem:'bmap'},
            {id:'s2'.type:'effectScatter'.coordinateSystem:'bmap'}]}; chart.setOption(option);/* Get air quality data */
    fetch('./lib/pm.json')
        .then((res) = > res.json())
        .then(data= > {
            const len=data.length
            const data2=data.splice(len-5,len)
            / / drawing
            chart.setOption({
                series:[
                    {
                        id:'s1',
                        data,
                        symbolSize:(param) = >{
                            return param[2] /10}}, {id:'s2'.data:data2,
                        symbolSize:(param) = >{
                            return param[2] /10}},]})});Chart.getmodel ().getComponent('bmap').getBmap ()*/

}
Copy the code

3.7 map (geo)

Register map of China

China Map Data Address:

Raw.githubusercontent.com/yezongyang/…

<! -- Map of China --><script src='./js/China.js'></script>
Copy the code

China. Js file

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports'.'echarts'], factory);
    } else if (typeof exports= = ='object' && typeof exports.nodeName ! = ='string') {
        // CommonJS
        factory(exports.require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this.function (exports, echarts) {
    var log = function (msg) {
        if (typeof console! = ='undefined') {
            console && console.error && console.error(msg); }}if(! echarts) { log('ECharts is not Loaded');
        return;
    }
    if(! echarts.registerMap) { log('ECharts Map is not loaded')
        return;
    }
    echarts.registerMap('china', < objects obtained from accessing data addresses >); }));Copy the code

Map:

/* Chartc-echarts map */
{
    const chart = echarts.init(document.getElementById('chartC'),'walden');

    /* Configuration item */
    const option = {
        /* * title title * text Main title, such as' average income of different regions in Xihong '* textStyle theme style * left left alignment * top margin, such as 12 * */
        title: {text:'Average income of different districts in Xihong city'.textStyle: {fontSize:24
            },
            left:'center'.top:32,},/* * tooltip * backgroundColor backgroundColor, such as 'rgba(2,177,236,0.6)' * */
        tooltip: {},/* * geo * map map name, such as' China '* zoom scale, While 1 * roam enables mouse zooming and scrolling * scale zooming * move pan * true enables both * itemStyle map area style * areaColor map areaColor. For example, rgba(0,29,132,0.8) * borderColor For example, #02c0ff * highlight polygons and label styles * itemStyle {} itemStyle * shadowColor * * */
        geo: {map:'china'.zoom:1.roam:true.itemStyle: {areaColor:'rgba (0,29,132,0.8)'.borderColor:'#02c0ff'
            },
            emphasis: {itemStyle: {shadowColor:'# 000'.shadowOffsetY:30.shadowBlur:30}}},/* * series collection * name Name, such as' number of tourists' * type Chart type * Scatter point map * coordinateSystem coordinate type, For example, 'geo' * data * symbolSize scatter size, the function (p)=>{return p[2]} * encode map * x x coordinate dimension map, such as' income '* y coordinate dimension map, For example, 'age' * tooltip hints for mapping such as [0, 1, 2, 3, 4] * itemStyle itemStyle * color item color, For example 'rgba(255,255,255,0.6)' * emphasis state * itemStyle itemStyle * color color, e.g. 'yellow' * */
        series:[
            {
                id:1.type:'scatter'.coordinateSystem:'geo'.symbolSize:(param) = >{
                    return param[2] /15
                },
                emphasis: {itemStyle: {color:'yellow'},}}]}; chart.setOption(option); fetch('./lib/income.json')// Revenue data
        .then((res) = > res.json())
        .then(data= > {
            dataLen = data.length;
            chart.setOption({
                series:[
                    {
                        id:1,
                        data
                    }
                ]
            })
            setInterval(anim, 1000);
        });



    let curInd = 0;
    let dataLen = null;

    function anim() {
        See action * seriesIndex seriesIndex, used to find a series in the series list * dataIndex data all, used to find an element in the series * */
        chart.dispatchAction({
            type: 'downplay'.seriesIndex: 0.dataIndex: curInd
        });
        /* The current index is incremented and cannot exceed the total number of elements in the series */
        curInd = (curInd + 1) % dataLen;

        /* Highlight the current graph */
        chart.dispatchAction({
            type: 'highlight'.seriesIndex: 0.dataIndex: curInd
        });
        / * show tooltip * /
        chart.dispatchAction({
            type: 'showTip'.seriesIndex: 0.dataIndex: curInd }); }}Copy the code