ECharts

最新推荐文章于 2025-03-31 10:27:09 发布

弗里曼的小伙伴

最新推荐文章于 2025-03-31 10:27:09 发布

阅读量955

点赞数

分类专栏： WEB 文章标签： echarts pie bar chart

本文链接：https://blog.youkuaiyun.com/sf2gis2/article/details/52853197

版权

WEB 专栏收录该内容

26 篇文章

订阅专栏

ECharts是一个基于HTML5+JS的图表库，用于创建动态、美观的统计报表。本文详细介绍了如何使用ECharts，包括初始化echarts对象、设置图表选项如标题、提示、图例、坐标轴和数据系列，以及展示了柱状图和双轴柱状图的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ECharts

sf2gis@163.com

2016年10月9日

2016年10月11日添加双轴柱状图

1 目标：在WEB页面展示统计报表等。

2原理：使用HTML5+JS技术构建动态、优美的图表。

ECharts是一个纯 Javascript 的图表库，底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts的核心组件是echarts，使用一个div作为图表的容器，在其中展示图表。所有属性、操作通过option输入echarts对象。

参考：

http://echarts.baidu.com/tutorial.html#ECharts%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D

3方法：

3.1 echarts对象：通过DIV指定html元素，使用echarts.init（）初始化对象。

<divid="echarts" style="width:600px;height:400px;"></div>

<scripttype="text/javascript" >

varmyChart=echarts.init(document.getElementById("echarts"));

3.2 echarts对象内容：echarts.setOption(opt);

3.2.1 标题title：显示图表标题。

3.2.2 鼠标提示tooltip：显示鼠标提示内容。

3.2.3 图例legend：通过data指定图例所指定的数据列名称。

3.2.4 坐标轴xAxis，yAxis：data指定坐标轴内容。可以指定两个坐标轴，数据内容通过指定坐标轴的index指定。

yAxis:[

{

name:'销量',

position:'left',

min:0,

max:40,

interval:5,

axisLabel:{formatter: '{value} 件'}

{

name:'金额',

position:'right',

min:0,

max:400,

interval:100,

axisLabel: {formatter: '{value} 元'}

}

series:[{

name:'销量',

type:'bar',

data:[5,20,36,10,10,20]

{

name:'销售额',

type:'bar',

yAxisIndex: 1,

data:[168,230,360,155,120,200]

}]

}

3.2.5 数据series：name指定数据列名，type指定图表类型，data指定数据内容。

var myChart=echarts.init(document.getElementById("echarts"));

varoption={

title:{text:"mychart title"},

tooltip:{},

legend:{data:['销量']},

xAxis:{

data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

yAxis:{

name:'date',

position:'left'

series:[{

name:'销量',

type:'bar',

data:[5,20,36,10,10,20]

}]

}

myChart.setOption(option);

4应用

4.1 柱状图

//EChartsDemo.htm

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<scripttype="text/javascript" src="js/echarts/echarts.js"></script>

<title>EChartsDemo</title>

</head>

<body>

<divid="echarts" style="width:600px;height:400px;"></div>

<scripttype="text/javascript" >

varmyChart=echarts.init(document.getElementById("echarts"));

varoption={

title:{text:"mychart title"},

tooltip:{},

legend:{data:['销量']},

xAxis:{

data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

yAxis:{

name:'date',

position:'left'

series:[{

name:'销量',

type:'bar',

data:[5,20,36,10,10,20]

}]

}

myChart.setOption(option);

</script>

</body>

</html>

4.2 双轴柱状图

//EChartsDemo.htm

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<scripttype="text/javascript" src="js/echarts/echarts.js"></script>

<title>ECharts Demo</title>

</head>

<body>

<divid="echarts" style="width:600px;height:400px;"></div>

<scripttype="text/javascript" >

varmyChart=echarts.init(document.getElementById("echarts"));

varoption={

title:{text:"mychart title"},

tooltip:{},

legend:{data:['销量','销售额']},

xAxis:{

data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

yAxis:[

{

name:'销量',

position:'left',

min:0,

max:40,

interval:5,

axisLabel:{formatter: '{value} 件'}

{

name:'金额',

position:'right',

min:0,

max:400,

interval:100,

axisLabel: {formatter: '{value} 元'}

}

series:[{

name:'销量',

type:'bar',

data:[5,20,36,10,10,20]

{

name:'销售额',

type:'bar',

yAxisIndex: 1,

data:[168,230,360,155,120,200]

}]

}

myChart.setOption(option);

</script>

</body>

</html>