图表插件ECharts的上手教程

最新推荐文章于 2021-05-07 14:59:12 发布

纸上得来终觉浅丶

最新推荐文章于 2021-05-07 14:59:12 发布

阅读量605

点赞数 1

分类专栏：前端文章标签：插件 javascript echarts-图表

本文链接：https://blog.csdn.net/qq_28550739/article/details/52125877

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

写网站的时候碰到一个功能：根据网页显示的内容动态生成环形图表。于是找到了IChartJS和ECharts两个图表插件，但是IChartJS不能兼容IE8及以下的浏览器，所以选择了ECharts图表。

一、下载ECharts
直接从官网上下载即可点击跳转到官方

二、开始使用

引入js文件

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

在html中插入以下代码，为 ECharts 准备一个具备宽高和ID属性的 DOM 容器：

 <div id="canvasDiv" style="width: 285px;height:270px;"></div>

在script中实例化echart并进行配置

         var data=[];
        $('.article-ichart-group').each(function(i){
            data[i]={
                name:$(this).find('.article-ichart-group-1').html(),
                value:$(this).find('.article-ichart-group-3').html(),
                itemStyle: {
                    normal: {color:$(this).find('.article-ichart-group-1').css('background-color')}
                }
            }
        })

因为我的图表是根据页面内容动态生成，所以图表用到的data属性是循环读取页面内容所得。
name：名称
value：数值
itemStyle{…}：自定义样式，如果不加这个，那么echart会自动分配颜色



 // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('canvasDiv'));

        // 指定图表的配置项和数据
        var option1 = {
            title : { //标题
                text: '当前份额占比', //标题现实的文字
                x:'left',//对齐方式
                textStyle:{ //文字样式
                    color:'#999',
                    fontWeight:'normal',
                    fontSize:12
                },
                left:40//距离左侧边距的距离(px)
            },
            tooltip: { //当鼠标浮动到某一块时显示的提示信息
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)" //提示信息的格式
            },
            series: [
                {
                    name:'份额占比',
                    type:'pie',
                    radius: ['38%', '70%'],
                    avoidLabelOverlap: false,
                    label: {//图例
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {//鼠标浮动到某一块时中间部分显示的内容(name)
                            show: true,
                            textStyle: {
                                fontSize: '22',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: { //图例的连接线
                        normal: {
                            show: false
                        }
                    },
                    data:data//数据源
                }
            ]
        };