美文网首页
如何使用echart

如何使用echart

作者: 无枉少年 | 来源:发表于2019-12-24 11:35 被阅读0次
[echart官网](https://www.echartsjs.com/zh/index.html

下载本地包,或者通过cmpn/npm cdn下载也可以


下载
第一步 :引入echarts.min.js

注意使用的时候,引入的文件要在你写方法之前,不然就会包echart is undefined 这个错误

<script src="js/echart/echarts.min.js"></script>
第二步 :在html里面
<div id="chartmain" style="width:500px; height: 400px; "></div>
第三步 :写方法
<script type="text/javascript">
            //初始化echarts实例
            var myChart = echarts.init(document.getElementById('chartmain'));

            //指定图标的配置和数据
            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: '健康老人',
                            itemStyle:{color:"#6c95fb"}
                        },
                        {
                            value: 310,
                            name: '失能老人',
                            itemStyle:{color:"#1dddb9"}
                        },
                        {
                            value: 234,
                            name: '半失能老人',
                            itemStyle:{color:"#f287b2"}
                        },
                        {
                            value: 135,
                            name: '失独老人',
                            itemStyle:{color:"#f78f1a"}
                        }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };

            //使用制定的配置项和数据显示图表
            myChart.setOption(option);
        </script>

目前是可以显示出来的


echartimg2.png

相关文章

网友评论

      本文标题:如何使用echart

      本文链接:https://www.haomeiwen.com/subject/ugixoctx.html