本文深入介绍了Echarts，一个由百度捐赠给Apache基金会的JavaScript图表库。Echarts提供丰富的图表类型，如柱状图、饼图、线性图，支持数据过滤、聚类和响应式设计。其健康活跃的开源社区贡献了众多插件。文章详细讲解了图表的常用参数，包括颜色修改、渐变、线和面的样式、数据堆叠、标签、工具箱、动画、事件监听等，并通过一个实战例子展示了如何配置和使用Echarts。
简单介绍一下echarts
他是javascript的图表库，有百度捐赠给apache基金会的，因为他不想D3和heightCharts一样 比较符合中国人的习惯
优点
丰富的图表类型
提供开箱即用的 20 多种图表和十几种组件，并且支持各种图表以及组件的任意组合。
强劲的渲染引擎
Canvas、SVG 双引擎一键切换，增量渲染、流加载等技术实现千万级数据的流畅交互。
专业的数据分析
通过数据集管理数据，支持数据过滤、聚类、回归，帮助实现同一份数据的多维度分析。
优雅的可视化设计
默认设计遵从可视化原则，支持响应式设计，并且提供了灵活的配置项方便开发者定制。
健康的开源社区
活跃的社区用户保证了项目的健康发展，也贡献了丰富的第三方插件满足不同场景的需求。
友好的无障碍访问
智能生成的图表描述和贴花图案，帮助视力障碍人士了解图表内容，读懂图表背后的故事。
下面进入正题先了解一下单词
instance实例
series系列
tooltip提示
legend图例
xAxis x轴 yAxis y轴
toolbox工具箱
dataZoom缩放
vitualMap 虚拟映射
折磨好看的表格想要不 带你们写一哈 但是之前先讲一下参数（下面内容十分繁琐，了解过的可以直接查看案例）
图标常用参数
bar柱状
pie饼形—一radius:["“60%”,“40%”]
-line线性---- areaStyle面/smooth:true平滑
颜色的修改
颜色的修改 light,dark浅色与深色
自定义主题:https://echarts.apache.org/zh/theme-builder.html
color :调色盘
color系列调色盘
itemStyle-----normal默认/emphasis强调状态
特别样式
渐变
var linear={
type: 'linear',
x:O,
y: o,×2: O,y2: 1,
colorStops: [{
offset: O, color: '#Obdcf3'// 0%处的颜色
}.{
offset: 1, color : '#0093dd'// 100%处的颜色
}],
global: false //缺省为false
}
线的样式lineStyle
lineStyle:{
width:12,
cap:"round",
opacity:0.7,
},
面的样式
areaStyle:{
color:linear2,
}.
数据的堆叠stack:true
label标签
- show: true是否显示
- formatter:"{a}{b}{c}格式化 a代表数据名 b代表系列名 c代表数字
- position位置 insideRight内部右侧 （top / left / right / bottom / inside）
- color颜色
多图表
grid 网格布局----top/left/right/bottom /height /width
XAxis yAxis 轴线指定—gridIndex: o,gridIndex: 1
series数据指定轴线 —xAxisIndex:0 yAxisIndex: o
工具箱
toolbox: {
show: true, //显示
feature: {
dataZoom: { //缩放
yAxisIndex: 'none'
},
dataView: { readOnly: false },//数据视图 可编辑
magicType: { type: ['line', 'bar'] },//魔法类型
restore: {},//重置
saveAsImage: {}//保存图片
}
},
动画
animationEasing:“bouncelnOut”.动画缓动函数
animationDelay(index)动画延迟
animationDuration(index)动画时间
事件监听
echart.on(“click”)
click,mouseover,mouseout,dblclick
事件发送
dispatchAction({
//显示提示
type:"showTip".//系列数据第0个
serieslndex:0,
// data数据第3
datalndex:index,
position:"top"
})
富文本
formatter:"{ bfbl{dHmin[%}n{b}". //格式 b数据名,d百分比
rich:{bfb:{css样式}min:{css样式}}
地图
mapType:“china”
type:“map”
echarts.regiterMap(“china”.json数据)
series[0].data=[{name:“河南”.value:xXx},-{name:“郑州市”. value:xx×}]
虚拟映射
定义:通过数值来映射不同颜色
type:“continuous"连续—calculable:true动态计算/min:10 ,最小/max: 100最大/color:[颜色/show:false是否显示控制条/pieces: []min: l,max:20,color:”#eee".symbol:"circle"最小，最大，颜色，符号
提示tooltip
tooltip:{formatter(e){}}
实战教学
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>//引入js
<style type="text/css">
#container{
width: 800px;
height: 700px;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
// 01 修改主题drak light 自定义
// 02 修改调色盘 全局 系列数据 color:[]
// 03 itemStyle某一个系列某一个元素
//初始化echart 实例
var echart = echarts.init(document.getElementById("container"));//'purple-passion'
//定义选项
var option ={
//调色盘
// color:["#3fb1e3","#f58db2","#0f7"],
//标题
title:{text:"前端大讲堂数据"},
//鼠标提示
tooltip:{},
//图例
legend:{data:["人数","人气","年龄分布"]},
//x轴线
xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
//y轴线
yAxis:{},
//系列数据
series:[
//修改某一个树状图颜色{value:900,itemStyle:{color:"#0f7"}}
{name:"人数",type:"bar",data:[1000,500,600,{value:900,itemStyle:{color:"#ffaaff"}},1300],itemStyle:{color:"#ff007f"}},
{name:"人气",type:"line",smooth:true,data:[200,500,600,100,1300]},
{name:"年龄分布",type:"pie",radius:["10%","5%"],left:"-50%",top:"-50%",
// color:["#3fb1e3","#f58db2","#0f7"],
data:[
{name:"少年",value:20},
{name:"青年",value:50},
{name:"中年",value:30,
//条目样式
itemStyle:{
//正常样式
normal:{color:"#f70"},
//强调样式
emphasis:{color:"#f3f"},
},
},
{name:"老年",value:8},
]}
]
};
//设置参数
echart.setOption(option)
</script>
</body>
</html>
js文件可以进入官网echarts官网进行下载或者私聊哦
1339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
