echarts功能配置实例----柱/折线、饼图

时间:2024-04-30 00:49:42

---恢复内容开始---

echarts中的柱状图和折线图的参数配置可以共用,一般只需要修改图表类型这一个参数即可。

一、echarts最简单的实例

  1、折线图/柱状图

  

<html>
<head>
<script src="resource/jquery-3.3.1.min.js"></script>
<script src="resource/echarts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//创建存放图表的echar
var chart = echarts.init($('#echartsLineDemo')[]);
//echars的参数配置项
option = {
xAxis: {
//坐标轴类型,大致可分类目轴category,x轴;数值轴value,y轴;
type: 'category',
//坐标轴名称数组
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
//需要显示的数据
data: [, , , , , , ],
//图表类型:line是折线、bar是柱状图、pei是饼图。
type: 'line'
}]
};
//添加option
chart.setOption(option);
}); </script>
</head>
<body>
<div id="echartsLineDemo" style="height: 500px;width: 800px;" > </div> </body>
</html>

补充:折线图和柱图图的配置类似,只需把图表类型修改成bar即可。

  2、饼图

    只需要更改option的配置即可。

option = {
title : {
text: '某站点用户访问来源', x:'center'
}, series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
], }
]
};