eCharts使用(一) 简单图表

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30896763

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量91

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端后端 ViewUI

原文链接：http://www.cnblogs.com/caiyanlin/p/8456015.html

本文介绍如何使用ECharts创建带有双x轴和双y轴的图表，并展示如何配置图表样式，包括设置标题、调整网格位置及添加数据系列。

首先下载eCharts源代码,然后可以按照官网的5分钟上手ECharts教程做一个简单的例子,这里为了将前端显示和后端逻辑分开，可以建一个index.html和一个绘制图表的chartTest.js,代码如下:

<html>
<head>
    <meta charset="UTF-8">
    <title>eChart Test</title>
    <script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:400px;float: left"></div>
<script src="chartTest.js"></script>
</body>
</html>

js代码如下：

option = {
    xAxis:{
        data: []
    },
    yAxis:{},
    series: [{
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

通过上面的代码就可以绘制出下面这样的一个简单的图表

其中xAxis和yAxis构成了平面直角坐标系网格中的x轴和y轴,一般情况下一个绘图网格中只能有两个x轴和两个y轴,例如我们可以这样建立一个有两个x,两个y轴的坐标系.代码如下：

option = {
    xAxis: [{
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }, {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }],
    yAxis: [
        {
            name: 'Left', type: 'value'
        },
        {
            name: 'Right', type: 'value', inverse: true,
        }
    ],
    series: [{
        type: 'line',
        data: [15, 20, 36, 10, 10, 20, 20]
    }, {
        yAxisIndex: 1,
        type: 'bar',
        data: [115, 210, 326, 320, 120, 220, 20]
    }]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

其中xAxis.data表示类目,yAxis.inverse表示反向坐标轴.series数组中的每个系列都会绘制出一个图表.上面代码的结果如下：

也可以通过yAxis.offset或者xAxis.offset来设置两个以上x,y轴。接下来我们在简单图表的基础上，加入一些其他属性来丰富我们的图表

option = {
    title://标题组件，包含主标题和副标题。
        {
            text: 'eCharts图表测试',
            subtext: '两个x,y轴的测试',
            left: 'center',
            textStyle: {
                fontWeight: 'bold',
            }
        },
    grid: {
        top: 80//网格距离容器上侧的距离
    },
    xAxis: [
        {
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            //类目数据
        },
        {
            inverse: true,//翻转
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']//类目数据
        }],
    yAxis: [
        {
            name: '销售件数',//坐标轴名称
            type: 'value'//坐标轴类型
        },
        {
            name: '销售额', type: 'value', inverse: true
        }
    ],
    series: [
        {
            type: 'line',//图表类型
            data: [15, 20, 36, 10, 10, 20, 20]
        }, {
            yAxisIndex: 1,
            type: 'bar',
            data: [115, 210, 326, 320, 120, 220, 20]
        }
    ]
};
var myChart = echarts.init(document.getElementById('main'));//初始化一个 echarts 实例
myChart.setOption(option);// 使用刚指定的配置项和数据显示图表。