ECharts 绘制图表

最新推荐文章于 2024-07-01 10:49:56 发布

alee123456789

最新推荐文章于 2024-07-01 10:49:56 发布

阅读量293

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yerongtao/p/6654517.html

版权

本文介绍一下如何使用ECharts框架绘制图形（说明：本文例子使用的是ECharts 3）

一、引入ECharts

ECharts 3 引入的方法和普通的JavaScript库一样，只需要一个script标签即可

<head lang="en">
    <meta charset="UTF-8">
    <title>firstChart</title>
    <!-----引用jquery和echarts---->
    <script type="text/javascript" src="JS/jquery-3.1.1.js"></script>
    <script src="JS/echarts.main.js"></script>
</head>

二、为ECharts图形准备一个具有宽高的DOM容器

<body>
<div id="myBarChart" style="width: 600px;height:400px;border: 1px solid"></div>
</body>

三、通过echarts.init方法初始化一个echarts实例并通过setOption方法生成一个简单的柱形图

完整代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>firstChart</title>
    <!-----引用jquery和echarts---->
    <script type="text/javascript" src="JS/jquery-3.1.1.js"></script>
    <script src="JS/echarts.main.js"></script>
</head>

<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="myBarChart" style="width: 600px;height:400px;border: 1px solid ;"></div>
<!--绘制图形代码-->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var barChart = echarts.init(document.getElementById('myBarChart'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '各运行部年度总量'
        },
        tooltip: {},
        legend: {
            data:['当年值']
        },
        xAxis: {
            data: ["炼油一部","炼油二部","炼油三部","炼油四部","芳烃部","油品储运部","热点部"]
        },
        yAxis: {},
        series: [{
            name: '当年值',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20, 33]
        }]
    };

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

运行结果如下图：

四、完善图形，配置折线图和柱形图效果图如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>firstChart</title>
    <!-----引用jquery和echarts---->
    <script type="text/javascript" src="JS/jquery-3.1.1.js"></script>
    <script src="JS/echarts.main.js"></script>
</head>

<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="myBarChart" style="width: 600px;height:400px;border: 1px solid ;"></div>
<!--绘制图形代码-->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var barChart = echarts.init(document.getElementById('myBarChart'));

    /*----------------------------柱形图和折线图---------------------------------*/
    var barItemStyle = {
        /*设置柱子的样式风格*/
        normal: {}, /*默认状态下，使用默认样式*/
        emphasis: {
            /*鼠标悬停状态下，加深柱子颜色的同时设置一个阴影部分*/
            color: '#e34509',
            barBorderWidth: 1,
            shadowBlur: 20,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0,0,0,0.5)'
        }
    };
    barChart.setOption(option = {
        title: {/*title 图形标题*/
            text: '柱形图和折线图', /*标题*/
            subtext: '数据为虚拟数据', /*副标题*/
            x: 'center',
            textStyle: {
                color: '#000',
                fontSize: 24
            }
        },
        tooltip: {}, /*显示鼠标悬停，默认格式*/
        legend: {/*legend 图例*/
            data: ['当月值', "上年同期", "年度指标"],
            x: 'center',
            y: 'bottom'
        },
        xAxis: {/*xAxis X轴*/
            data: ["炼油一部", "炼油二部", "炼油三部", "炼油四部", "芳烃部", "油品储运部", "热电部"],
            axisTick: {
                alignWithLabel: true/*设置坐标轴刻度与标签对齐，默认不设置的状态下是不对齐的*/
            },
            axisLabel: {
//                    rotate: 60
                textStyle: {
                    color: '#000'
//                    fontSize:13
                }
            }
        },
        yAxis: {},
        series: [/*series 系列信息*/
            {
                name: '当月值', /*name 需要与图例保持一致*/
                type: 'bar', /*type 指明图形类型，bar 柱形图*/
                itemStyle: barItemStyle,
                data: [32, 43, 54, 65, 54, 56, 32]

            },
            {
                name: '上年同期', /*name 需要与图例保持一致*/
                type: 'bar', /*type 指明图形类型，bar 柱形图*/
                itemStyle: barItemStyle,
                data: [34, 45, 23, 45, 24, 56, 62]

            },
            {
                name: '年度指标',
                type: 'line', /*line 折线图*/
                itemStyle: {
                    normal: {
                        color: '#ffff00'/*默认状态下*/
                    },
                    emphasis: {
                        /*鼠标悬停状态下，加深柱子颜色的同时设置一个阴影部分*/
                        color: '#f0f033',
                        barBorderWidth: 1,
                        shadowBlur: 20,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowColor: 'rgba(0,0,0,0.5)'
                    }
                },
                data: [30, 28, 20, 30, 29, 27, 19]
            }
        ]
    });
</script>
</body>
</html>

运行效果图如下，距离目标效果图就差一个颜色和风格主题：