eCharts使用(一) 简单图表

2018-02-21 19:29:12来源:cnblogs.com作者:拍手笑清风人点击

分享

首先下载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"></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);// 使用刚指定的配置项和数据显示图表。

相关文章

    无相关信息

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台