使用echarts实现图表项目的注意点

本篇文章给大家带来的内容是关于使用echarts实现图表项目的注意点，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近一段时间做了一个使用echarts的图表项目。由于理解API能力有限，使用起来并非畅通无阻。
所谓好记性不如烂笔头，现将一些比较关键的点记录一下，供后续查看。

一 使用方法

项目：ionic+angular4+echarts

    1.由于打包原因，echarts不能直接引入进package.json的dependencies中，只能以原始的方式从index.html中引入
    

    2.在组件的.html文件中
    


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

二 注意点

1.每一块渲染区域都有一个position的设置，可以自定义离上、下、左、右的距离

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

2.每一个涉及值的显示点基本都提供了formatter

tooltip:{
        formatter: params => { //自定义hover状态数据显示的情况
            let str = '';
            str += `
${params[0].name}
`;
            params.forEach(item => {
                str += `${item.marker}${item.seriesName}: ${Math.round(item.value).toLocaleString()}
`;
                //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 配置坐标轴的一些属性 刻度、坐标轴名称、如何显示坐标信息

4.toolbox 工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置5个工具
其中导出图片可以自己通过canvas的相关API 将多个图表一并导

5.dataZoom 数据区域缩放组件 -- 可以一个也可以多个

第三波网上书店源码

网络购物已经随着Ineternet的飞速发展而得到越来越多应用。为了提高交易效率，节省人们的宝贵时间，我们开发了这套稳定可靠、操作方便、安全有效的时尚购书系统，它主要分为前台和后台两大模块：（前台）使用了站点地图，显示您所在网站的位置。首页图书列表显示，用户登陆，用户注 册，列出图书详细，购物车功能，以及结算等。（后台）图书、用户的添加，删除，修改等操作，查看客户的订单及修改 该项目采用三层结构开

下载

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

6.series 系列列表，每个系列通过type决定图表类型 --根据不同的图表注入不同格式的数据

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

其实细分到每一个图表都有一些细微的设置，数据以及颜色、间距等，待续...

相关推荐：

echarts实现饼图扇区统计表的添加点击事件

使用Echarts实现动态曲线图表