echarts使用

最新推荐文章于 2022-09-14 18:38:59 发布

W_325424

最新推荐文章于 2022-09-14 18:38:59 发布

阅读量303

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 Echarts 图表

本文链接：https://blog.youkuaiyun.com/W_325424/article/details/86655090

前端同时被 3 个专栏收录

5 篇文章

订阅专栏

Echarts

1 篇文章

订阅专栏

图表

1 篇文章

订阅专栏

步骤：

*1、需要导入的js文件：

jquery-3.3.1.min.js（版本号自己选择下载）
echarts.js（也是自己选择下载，可以将echarts-all.js下载下来，下载路径：https://www.echartsjs.com/download.html）

*2、设置一个放图表的容器（一般就拿<div></div>）

<div id="container" style="width: 800px;height: 600px;"></div>

注：初学者关于CSS样式就可先忽略掉，有一个大致的容器大小即可

*3、对图表的初始化

4、指定图标的配置和数据

*5、显示图表

注：第三步和第四步顺序可交换，若重复对图表进行了初始化（或者一些其他未正确进行初始化的情况），则会报错：Initialize failed: invalid dom，删去一个即可。

步骤3-5在Echarts官网上选择自己喜欢的图表放在<script></script>即可。

附上代码：（饼状图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jq/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jq/echarts.js"></script>
</head>
<body>
<div class="col-xs-4">
    <h3>饼状图</h3>
    <div id="container" style="width: 800px;height: 600px;"></div>
    <script type="text/javascript">
              option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                }
            ]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('container'));

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

效果：