ECharts使用总结

最新推荐文章于 2024-02-21 09:41:11 发布

VIP文章 sharonXuran

最新推荐文章于 2024-02-21 09:41:11 发布

阅读量9.1k

点赞数 3

分类专栏：可视化文章标签：数据可视化 html

本文链接：https://blog.csdn.net/sharon0044/article/details/79123431

版权

一、步骤

1.下载ECharts

有精简版、完整版等等，可以在ECharts官网上下载，下载为：echarts.min.js或echarts.js等等。

2.在html文件中调用

创建一个html文件：

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>

</body>
</html>

在 < head ></ head >标签中加入 < script src =" 你的 js 的路径 /echarts.min.js"></ script > 。

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>

</body>
</html>

如果有调用地图的话，还需要引入相应的.js文件。

3.完成整个页面显示

具体可参照ECharts官网的手册以及官方示例。

二、实例

1.基本图表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

更多参考：ECharts教程ECharts社区 ECharts实例

2.地图

2.1 ECharts地图

要绘制地图的话，需要下载地图的扩展工具，ECharts的github上可以下载到map文件夹，其中有china.js以及全国各省的相应的地图的.js文件。传送门：ECharts Github

显示一个中国地图的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <!--引入地图需要的js文件 bmap.js 中国地图china.js-->
    <script src="dist/extension/bmap.js"></script>
    <script src="map/js/china.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1280px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            //backgroundColor: '#404a59',
            title: {
                text: 'ECharts地图',
                left: 'center',
                textStyle: {
                    color: '#404a49'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {
                        readOnly: false
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            geo: {
                map: 'china',

                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',

最低0.47元/天解锁文章

sharonXuran

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
ECharts使用总结

一、步骤1.下载ECharts有精简版、完整版等等，可以在ECharts官网上下载，下载为：echarts.min.js或echarts.js等等。2.在html文件中调用创建一个html文件：在head>head>标签中加入script src="你的js的路径/echarts.min.js">script
复制链接

扫一扫