eChartJs图表设计:如何绘制一个饼图

2018年10月28日23:34:37 XXM

最近在项目的开发当中,出现了一些统计表的需求,对于canvas并没有很深入的了解所以完全无法完成这个需求,于是开始求助互联网,于是找到了MSChart、ichartjs、Chart.js、ECharts.js。

最终我选择了eChartJs,eChartJs是目前百度开发团队一直在更新的开源图表库,并且含有丰富的中文文档,最终选择了他来作为图表需求的设计.

timg.jpeg

现在开始步入正题:

EchartJs 官网:http://echarts.baidu.com/

1.下载好Js库后,通过<Script>引入

<script type="text/javascript" src="js/echarts.js"></script>

开始下面第一个简单的案例饼图

2.首先需要准备一个p容器用于放入图表

<p id="myChart" style="width:600px; height: 400px;"></p>

大概就这样吧,不得不吐槽一下百度,现在都二十一世纪了,已经到处都是自适应页面了,还需要用这种古老的方式来初始化....

经测试后对于width可以自适应p,但是height依然必须手动指定,当网页分辨率更改时并不会自适应地调整.如果需要分辨率更改时达到自适应的效果,就需要利用到window.resize来操作了,下面给个简单解决方案:

window.resize = function(){
  window.reload();
}

如何想要不reload的话 就可能需要对dom节点进行操作然后重新渲染一遍,这个过程有点噼里啪啦一大堆,暂不解释,还是回到主题当中:

3.初始化图表参数

//初始化配置
var option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
//初始化实例
var myChart = echarts.init(document.getElementById('myChart'));

//设置并展示图表
myChart.setOption(option);

4.做完以上操作就可以看到一个饼图了

WX20181028-235521@2x.png

总结一下:

p容器必须指定高度不然显示不出来.

echarts.init 必须放置一个Dom对象,如果是JQ请转换成Dom对象.

setoption: 需要传入的是json

好了,本篇简单使用就到这了.

654482.jpg

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容