浏览器画图原理
- canvas
基于像素，放大会失真。echarts基于canvas画图。 - svg
基于对象模型，放大不会失真 。
图形组件
- 标题 + 工具栏 + 图例 + 提示框
- 坐标轴（X、Y）
简单的直方图和折线图
- 在html中准备Dom，要有宽高
- 在js中初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); - 指定图标的配置项和数据
title标题
toolbox工具箱
legend图例
xAxis yAxis坐标轴
series数据 - 将3中的数据，显示在1中的Dom元素中
myChart.setOption(option); - 折线图的实现
series.type = 'line'即可
常用组件
1. 标题
option.title
文档位置
title: {
show:true, // 是否显示
text: 'ECharts 入门示例', // 主标题
subtext:'学习ECharts就来慕课网', // 副标题
left:'right', // 数字就是像素值 ，也可以是 center left right这种值
borderColor:'red', // 边框颜色
borderWidth:5, // 边框宽度
textStyle:{
fontSize:40 // 字体大小
}
},
2. 工具栏
option.toolbox
文档位置
toolbox: {
show: true,
feature: {
dataView:{ // 展示图表数据，可编辑 -- 1
show:true
},
restore:{ // 配置项还原（编辑之后点击即可还原）-- 2
show:true
},
dataZoom:{ // 数据区域缩放 -- 3、4
show:true
},
saveAsImage: { // 保存为图片 -- 5
show: true
},
magicType: { // 图表类型切换 -- 6、7
type: ['line', 'bar']
}
}
},
参数对应图标
3. 弹框
option.tooltip
tooltip: {
show: true, // 是否显示，默认显示
trigger: 'axis' // 触发方式（X轴触发）
},
弹框效果
4. 标记线 和 标记点
option.series.markLineoption.series.markPoint
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值',symbol:'arrow'} // symbol -- 标记形状
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}]
标记线 标记点 效果
其他常用图
1. 饼图
其余步骤一样，不同在于options.series
legend: {
orient: 'vertical',
left: 'left',
// 图例和series.data中的数据一一对应，可以点击显示或隐藏
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie', // 饼图
radius : '55%', // 半径大小
center: ['50%', '60%'], // 圆心位置
data:[
{value:335, name:'直接访问'}, // value--占比 name--名字
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
文档位置
2. 仪表图
series: [
{
name: '业务指标',
type: 'gauge', // 仪表图
detail: {formatter:'{value}%'},
data: [{value: 32, name: '完成率'}]
}
]
3. 地图
// 经纬度
var geoCoordMap = {
'上海': [121.4648,31.2891],
'东莞': [113.8953,22.901],
'玉溪': [101.9312,23.8898],
'珠海': [113.7305,22.1155],
};
// 城市A到其他城市的值
var BJData = [
[{name:'北京'}, {name:'上海',value:95}],
[{name:'北京'}, {name:'广州',value:90}],
[{name:'北京'}, {name:'大连',value:80}],
];
// 飞机图片格式
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
// 将以上格式转化为echarts所需的格式 -- 定义函数
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push([{
name: dataItem[0].name,
coord: fromCoord
}, {
name: dataItem[1].name,
coord: toCoord
}]);
}
}
return res;
};
// 格式转化
var color = ['#a6c84c', '#ffa022', '#46bee9'];
var series = [];
[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
series.push({
name: item[0] + ' Top10',
type: 'lines',
zlevel: 1,
// 调样式
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
// 调样式
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
// 重点 -- 数据
data: convertData(item[1])
},
{
name: item[0] + ' Top10',
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + ' Top10',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});
});
option.geo 和地图相关的数据
option.series 格式化处理好的数据
3. 散点图
options.series.type = 'scatter'
4. K线图
options.series.type = 'candlestick'
5.雷达图
options.series.type = 'radar'
echarts的高级使用
1.多个坐标系配合 -- 举例，多个y轴
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:'line',
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]
}
]
设置两个y轴，配置多个yaxis属性
用yAxisIndex将值和y轴关联
效果图
2.dataZoom组件
dataZoom: [{
type: 'slider',
start: 10, // 0-100 百分比
end: 40
}],
效果图
3.值域漫游
dataRange: {
min: 0,
max: 200,
calculable: true,
color: ['#d94e5d','#eac736','#50a3ba'],
textStyle: {
color: '#fff'
}
},
效果图
个性化图表的样式
文档位置
<script src="echarts.js"></script>
<!-- 引入 vintage 主题 -->
<script src="theme/vintage.js"></script>
<script>
// 第二个参数可以指定前面引入的主题
var chart = echarts.init(document.getElementById('main'), 'vintage');
chart.setOption({
...
});
</script>
