Echarts学习精华的提炼

实习期小潘

已于 2022-01-20 17:11:48 修改

阅读量1.8k

点赞数 5

分类专栏：笔记文章标签： echarts 前端 javascript

于 2022-01-20 17:11:05 首次发布

本文链接：https://blog.csdn.net/m0_60264901/article/details/122584809

版权

Echarts的使用指南！

摘要由CSDN通过智能技术生成

前言

Echarts的出现是由于市场上的需求，应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。

Echarts的可视化效果就是引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 ...所以这一章节主要是从实际开发过的项目来进行学习。

先来展示一下对于这个知识的“立可得”智能看板应用案例：

其实这个案例的制作整体不是太难，主要是让我们掌握如何应用Echarts来将数据可视化。

这个案例里面引入了5中图表和1张地图的，我就从这些图表的基础配置来介绍Echarts的应用方法

Echarts使用步骤

下载echarts GitHub - apache/echarts at 4.5.0
引入echarts “dist/echarts.min.js”
准备一个具备大小的DOM容器（盒子）来存放图表
初始化echarts实例对象

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

指定配置项和数据(option)

var myChart = echarts.init(document.getElementById('box'));

将配置项设置给echarts实例对象

myChart.setOption(option);

如果想让图表能跟着页面的大小而改变自适应可以写：

 window.addEventListener("resize", function() {
        myChart.resize();
    });

使用步骤知道后，我们再来学习里面的基础配置！

点位图

插入本案例中的代码如下：

// (function(){})();立即执行函数
(function() {
    // 1.实例化对象
    var myChart = echarts.init(document.querySelector(".pie"));
    // 2.指定配置项和数据
    var option = {

        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

        series: [

            {
                name: 'Area Mode',
                type: 'pie',
                radius: ['10%', '70%'],
                // radius为百分比就是针对这个容器pie而言
                center: ['50%', '50%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5
                },
                data: [
                    { value: 20, name: '云南' },
                    { value: 26, name: '北京' },
                    { value: 24, name: '山东' },
                    { value: 25, name: '河北' },
                    { value: 20, name: '江苏' },
                    { value: 25, name: '浙江' },
                    { value: 30, name: '四川' },
                    { value: 42, name: '湖北' }
                ],
                // label对象用于修饰图表中的字体
                label: {
                    fontSize: 12,
                },
                // labelLine中注释的线
                labelLine: {
                    length: 6,
                    length2: 8
                }
            }

        ],

    };
    // 3.配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 4.图标也可以自适应我们的屏幕
    window.addEventListener("resize", function() {
        myChart.resize();
    });
})();

里面有些参数我来解释一下：

tooltip：

tooltip: {                    //tooltip提示框组件
            trigger: 'item',  //trigger触发类型：item——数据项图形触发主要在散点图、饼图等
//axis坐标轴触发主要在柱状图，折线图等 //none 什么都不触发
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

series系列：

 series: [

            {
                name: 'Area Mode',
                type: 'pie',
                radius: ['10%', '70%'],// radius为百分比就是针对这个容器pie而言
                center: ['50%', '50%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5
                },
                data: [                //存放自己的数据
                    { value: 20, name: '云南' },
                    { value: 26, name: '北京' },
                    { value: 24, name: '山东' },
                    { value: 25, name: '河北' },
                    { value: 20, name: '江苏' },
                    { value: 25, name: '浙江' },
                    { value: 30, name: '四川' },
                    { value: 42, name: '湖北' }
                ],
                label: {                // label对象用于修饰图表中的字体
                    fontSize: 12,
                },
                labelLine: {           // labelLine中注释的线
                    length: 6,
                    length2: 8     //其实饼状图上默认有两条注释线引申出来控制线的长短
                }
            }

        ],