Notes on using echarts to implement chart projects

The content of this article is about the points to note when using echarts to implement chart projects. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Recently I did a chart project using echarts. Due to the limited ability to understand the API, it is not smooth to use.
It is said that a good memory is not as good as a bad writing. Now I will record some key points for subsequent review.

1 How to use

Project: ionic angular4 echarts

    1.由于打包原因，echarts不能直接引入进package.json的dependencies中，只能以原始的方式从index.html中引入
    <script src="assets/js/echarts.min.js"></script>

    2.在组件的.html文件中
    <div echarts [options]="pieOption" (chartClick)="jump2Detail($event)"></div>

    3.在组件的.ts文件中配置好options的值pieOption以及点击drill down的逻辑

2 Notes

1. Each rendering area has a position setting, you can Customize the distance from top, bottom, left, and right

    grid:{
        top:...
        left:...
        bottom:...
        right:...
    }
    
    legend:{
        top:...
        left:...
        ...
    }

2. Each display point involving a value basically provides a formatter

tooltip:{
        formatter: params => { //自定义hover状态数据显示的情况
            let str = '';
            str += `<h6 style="color:#fff;font-size:13px;margin:4px 0">${params[0].name}</h6>`;
            params.forEach(item => {
                str += `${item.marker}${item.seriesName}: ${Math.round(item.value).toLocaleString()}<br>`;
                //item中提供了图标、颜色等
            });
            return str;
        }
    }
    
    legend:{
        formatter: (name) => { //需要根据值去重算数据然后显示的情况
            let source = data.source[name.toUpperCase()];
            var total = 0;
            source.forEach(element => {
                total += element;
            });

            return name + ': ' + Math.round(total).toLocaleString();
        }
    }

3.xAxis/yAxis configures some coordinate axes Attribute scale, axis name, how to display coordinate information

4.toolbox toolbar, with built-in 5 tools for exporting pictures, data view, dynamic type switching, data area scaling, and reset
Among them, exporting pictures You can import multiple charts together through the relevant API of canvas

5.dataZoom data area zoom component--it can be one or multiple

dataZoom:[
    {
        type:'inside', //内置在坐标系中 通过鼠标滚轮或者手指touch进行处罚
        ...
    },
    {
        type:'slider', //在外部 显示为滑动条形的一个组件，可直接拖动使用
        ...
    }
]

6.series series list, each The series determines the chart type through type - injecting data in different formats according to different charts

series:{
    type:'line'/'pie'/'bar'/'treemap',
    ...
}

In fact, each chart has some subtle settings, data, color, spacing, etc., to be continued...

Related recommendations:

echarts implements adding click events to the pie chart sector statistics table

Use Echarts to implement dynamic curves chart

The above is the detailed content of Notes on using echarts to implement chart projects. For more information, please follow other related articles on the PHP Chinese website!