浏览器画图原理
-
Canvas
- 基于像素
- 单个
html，类似于画笔在画布上画画 -
Echarts基于Canvas画图
-
SVG
- 基于对象模型
- 多个图形元素
- 高保真
简单例子
-
带标号的 4 步
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="echarts.js"></script> </head> <body> <!-- 1. 给定一个容器并设置好宽高 --> <div id="main" style="width:900px;height:600px;"></div> <script> // 2. 初始化 Echarts 实例 var myChart = echarts.init(document.getElementById('main')); // 3. 配置 var option = { // 标题 title:{ text:'Echarts 入门示例' }, // 工具箱 toolbox:{ show:true, feature:{ saveAsImage:{ show:true } } }, // 图例 legend:{ data:['销量'] }, // x 轴 xAxis:{ data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'] // axisLabel 可以解决 x 轴标签密集显示不全的问题 }, yAxis:{}, // 数据 series:[{ name:'销量', type:'bar', data:[5,20,36,10,10,20] }] }; // 4. 调用 myChart.setOption(option) </script> </body> </html>Echarts 入门示例
x 轴标签过多导致排不开的解决方法
xAxis: {
type: 'category',
boundaryGap: false,
data: arr[0].xVals,
axisLabel: {
interval: 0,
// rotate:40
formatter: function (value, index) {
if (index % 2 != 0) {
return "\n\n" + value;
}
else {
return value;
}
}
}
}
-
toolbox工具箱组件-
show显示 -
feature-
dataView数据视图 -
restore还原 -
dataZoom区域缩放 -
magicType切换图表类型 -
saveAsImage保存为图片
-
-
-
tooltip弹窗组件-
trigger触发类型
-
-
标记线和标记点
- 标记线：
markline - 标记点：
markpoint
series:[{ name:'销量', type:'bar', data:[5,20,36,10,10,20], markPoint:{ // 标记点 data:[ { type:'max',name:'最大值' },{ type:'min',name:'最小值' }] }, markLine:{ // 标记线 data:[ { type:'average',name:'平均值' }] } }] - 标记线：
最大 / 最小 / 平均
- 地图
- 需要在官网上下载地图
- 有两种引入方式
-
JavaScript示例<script src="echarts.js"></script> <script src="map/js/china.js"></script> <script> var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); </script> -
JSON示例$.get('map/json/china.json', function (chinaJson) { echarts.registerMap('china', chinaJson); var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); });
-
进阶
-
多个坐标轴配合
- 两个图合并展示
- 设置两个
Y轴 - 配置多个
yAxis - 主要是依靠给
series中的某个对象添加yAxisIndex:1（根据这个值查文档）
-
dataZoom主要用于X轴数据非常多时-
X轴可以控制区域- 区间显示
- 缩放显示
dataZoom: [{ type: 'inside', start: 0, end: 10 }dataZoom 应用 -
- 值域漫游（
visualMap）过滤数据展现
-
之前叫
dataRange，现在叫visualMapvisualMap
