3.1 柱状图
实现步骤
-
Echarts最基本的代码结构
-
引入js文件
-
DOM容器
-
初始化对象
-
设置option
-
-
x轴数据
-
y轴数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/echarts.min.js"></script> </head> <body> <div style=" 600px; height: 400px;"></div> <script> var mCharts = echarts.init(document.querySelector('div')); var xDataArr = ['张三', "李四", "王五", "闰土", "小明", "茅台", "二妞", "大强"] var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]; var option = { xAxis: { type: "category", data: xDataArr }, yAxis: { type: 'value' }, series: [ { name: '语文', type: 'bar', data: yDataArr } ] }; mCharts.setOption(option); </script> </body> </html>
3.1.1 常用效果
-
标记 最大值、最小值、平均值
makePointmarkLine -
显示： 数值显示 柱宽度 横向柱状图
-
柱宽度
barWidth
3.1.2 通用配置
通用配置指的就是任何图表都能使用的配置
3.1.2.1 标题 title
-
文字样式
textStyle -
标题边框
borderWidthborderColorborderRadius -
标题位置
lefttopbottomright
3.1.2.2 提示 tooltip
提示框组件，用于配置鼠标滑过或点击图表时的显示框
-
触发类型
trigger-
item在坐标内部
-
axis在坐标轴上
-
-
触发时机
triggerOn-
mouseover
-
click
-
-
格式化
formatter-
字符串模板
-
回调函数
-
3.1.2.3 工具按钮 toolbox
Echarts提供的工具栏。
内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
3.1.2.4 图例 legend
用于筛选系列，需要和series配合使用。
-
legend中的data是一个数组
-
legend中的data的值需要和series数组中某组数据的name值一致