1.浏览器画图原理
1.1 Canvas与Svg的区别
1.1.1 Canvas——01/canvas.html
- 基于像素
- 单个html，类似于画笔在画布上画画
- Echarts基于canvas画图
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//开始一个新的绘制路径
ctx.beginPath();
//设置弧线的颜色为蓝色
ctx.strokeStyle = "blue";
var circle = {
x : 100, //圆心的x轴坐标值
y : 100, //圆心的y轴坐标值
r : 50 //圆的半径
};
//沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
//按照指定的路径绘制弧线
ctx.stroke();
1.1.2 Svg——01/svg.html
无JS
- 基于对象模型
- 多个图形元素
- 高保真
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- circle是圆形标签 -->
<circle cx="70" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
<!-- rect是长方形标签 -->
<rect x='120' width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
image.png
1.2 常见图形组件
- 标题、工具栏、图例、提示框
- 坐标轴：X轴、Y轴
2.Echarts常见图
官网下载完整版的Echarts.js
image.png
2.1 柱形图
Type：bar
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
// 标题
title: {
text: 'ECharts 入门示例'
},
// 工具箱
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true
}
}
},
// 图例
legend: {
data: ['销量']
},
// x轴
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
// 数据
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
image.png
2.2 折线图
Type：line
与柱形图一致
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true
}
}
},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},{
name: '产量',
type: 'line',
data: [7, 30, 50, 11, 40, 80]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
image.png
3.Echarts其他常见图
3.1 饼图
Type：pie
- 展示百分比
- Center圆心坐标
- Radius半径
- Name图例名字
- selectedMode是否支持多选
image.png
3.2 仪表图
Type：gauge
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '业务指标',
type: 'gauge',
detail: {formatter:'{value}%'},
data: [{value: 32, name: '完成率'}]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
image.png
动态修改表格效果(生成随机数)：
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000);
3.3 地图
需下载中国地图的数据，引入china.js
image.png
3.4 散点图
Type：scatter
series: [
{
name: '北京',
type: 'scatter',
itemStyle: itemStyle,
data: dataBJ
},
{
name: '上海',
type: 'scatter',
itemStyle: itemStyle,
data: dataSH
},
{
name: '广州',
type: 'scatter',
itemStyle: itemStyle,
data: dataGZ
}
]
image.png
3.5 K线图
Type：candlestick
series: [
{
name: '日K',
type: 'candlestick',
data: data0.values,
markPoint: {
label: {
normal: {
formatter: function (param) {
return param != null ? Math.round(param.value) : '';
}
}
},
data: [
{
name: 'XX标点',
coord: ['2013/5/31', 2300],
value: 2300,
itemStyle: {
normal: {color: 'rgb(41,60,85)'}
}
},
{
name: 'highest value',
type: 'max',
valueDim: 'highest'
},
{
name: 'lowest value',
type: 'min',
valueDim: 'lowest'
},
{
name: 'average value on close',
type: 'average',
valueDim: 'close'
}
],
tooltip: {
formatter: function (param) {
return param.name + '<br>' + (param.data.coord || '');
}
}
},
markLine: {
symbol: ['none', 'none'],
data: [
[
{
name: 'from lowest to highest',
type: 'min',
valueDim: 'lowest',
symbol: 'circle',
symbolSize: 10,
label: {
normal: {show: false},
emphasis: {show: false}
}
},
{
type: 'max',
valueDim: 'highest',
symbol: 'circle',
symbolSize: 10,
label: {
normal: {show: false},
emphasis: {show: false}
}
}
],
{
name: 'min line on close',
type: 'min',
valueDim: 'close'
},
{
name: 'max line on close',
type: 'max',
valueDim: 'close'
}
]
}
},
image.png
3.6 雷达图
Type：rader
Rader：存放数据
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
title: {
text: '基础雷达图'
},
tooltip: {},
legend: {
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
},
radar: {
// shape: 'circle',
indicator: [
{ name: '销售（sales）', max: 6500},
{ name: '管理（Administration）', max: 16000},
{ name: '信息技术（Information Techology）', max: 30000},
{ name: '客服（Customer Support）', max: 38000},
{ name: '研发（Development）', max: 52000},
{ name: '市场（Marketing）', max: 25000}
]
},
series: [{
name: '预算 vs 开销（Budget vs spending）',
type: 'radar',
// areaStyle: {normal: {}},
data : [
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : '预算分配（Allocated Budget）'
},
{
value : [5000, 14000, 28000, 31000, 42000, 21000],
name : '实际开销（Actual Spending）'
}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
image.png
4.Echarts高级的使用
4.1 多个坐标系配合
- 两个图标合并展示
- 设置两个y轴
- 设置多个yaxis属性
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['蒸发量','降水量','平均温度']
},
xAxis: [
{
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis: [
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均温度',
type:'line',
yAxisIndex: 1,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
image.png
4.2 dataZoom组件-区域缩放
- X轴可以控制区域【区间显示、缩放显示】
- 配置dataZoom
//Start、End为百分比
dataZoom: [{
type: 'slider',
start: 10,
end: 40
}],
image.png
4.3 值域漫游-值域选择
- 值域漫游：过滤数据展现，即根据值的大小拖拽限制展示
** 需引入china.js **
dataRange: {
min: 0,
max: 200,
calculable: true,
color: ['#d94e5d','#eac736','#50a3ba'],
textStyle: {
color: '#fff'
}
},
image.png
5.Echarts项目
- 模块化——Webpack中使用
- 异步获取数据绘图
- 练习：去过的地方
- 百度地图的api，根据地点转化经纬度
- Echarts可视化展示
5.1 定制主题
文档——>教程
在Webpack中使用Echarts；异步数据加载和更新
5.2 准备文件
- 申请百度地图开发api
- 异步加载数据，获取经纬度
- 绘图，在地图上做标记
- 项目扩展：手机号来源地查询，ip地址查询等
image.png
5.3 步骤
5.3.1 初始化文件
引入bootstrap，jQuery和echarts
若需要地图，还要引入china
5.3.2 准备好html内容
- 输入框
- echarts容器
5.3.3 申请百度开发者密钥
Web服务API——>Geocoder API
- 准备好输入框和echarts容器
- 研究geocoder接口使用
- 绑定事件，用户点击可以跨域调百度接口【url加callback】，获取经纬度信息
image.png
// 画地图必须要经纬度数据
// 百度地图的开发者秘钥
var token = 'fHrNQj6DHTjZtfTvfqbsuvTzKc5V9SBl'
var url = 'http://api.map.baidu.com/geocoder/v2/?output=json&ak=' + token + '&address='
var ePlaceInput = $('#place-input')
var eSearchBtn = $('#search-btn')
eSearchBtn.click(function() {
var place = ePlaceInput.val()
if (place) {
$.getJSON(url + place + '&callback=?', function(res) {
if (res.status === 0) {
console.log(place, res.result)
}else{
alert('百度没有找到地址信息')
}
})
}
})
5.3.4 根据获取经纬度数据，地图标记
- 渲染地图
5.3.5 持续标记
- 加上导出图片功能
var myChart = echarts.init(document.getElementById('main'))
var chartData = []
eSearchBtn.click(function() {
var place = ePlaceInput.val()
if (place) {
$.getJSON(url + place + '&callback=?', function(res) {
var loc
if (res.status === 0) {
loc = res.result.location
chartData.push({
name: name,
value: [loc.lng, loc.lat]
})
drawMap(place)
}else{
alert('百度没有找到地址信息')
}
})
}
})
