canvas作图与echarts.js结合作图，此demo采用node.js+ejs+echart.js技术；
详细demo，可参考https://github.com/long861/echarts_ml
这是这篇文章的入口；
文件中则在view/first.ejs;
以后，如有类似学习性demo，本人将会把释义直接在文档中标注；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/echarts.js"></script>
<title>
<%= title %>
</title>
<style>
body {
margin: 0px;
padding: 0px;
}
.content {
width: 60%;
margin: 50px auto;
border: solid 1px #a0a0a0;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="content">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</body>
<script>
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
//title 标题组件，包含主标题和副标题，echarts 3中可以存在任意多个title，但需要进行排版；
title: {
text: 'ECharts 入门示例\ndemo', //text 主标题文本，支持\n换行；
//link:{default:String}, //主标题超文本链接；
textStyle: { color: 'red' } //主标题颜色；同时可以在obj中增加主题标题的fontSize，fontWeight，fontSize等等；align水平位置，verticalAlign水平位置；
// subtext:'' //副标题文本；
//sublink:'' //副标题超文本链接；
//subtextStyle:{color:red} //副标题style，同主标题一样设置；
},
//提示框组件；
tooltip: {
show: true, //是否显示提示框组件包括提示框浮层和axisPointer 值为boolean,默认为true；
trigger: 'axis', //触发类型；可选可不选，值为：item，axis，none；
//item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用;
//axis:坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
//none:什么都不触发;
axisPointer: { //坐标轴指示器配置项。
type: 'cross'
}
},
legend: {
data: ['销量','价格'] //图例的数据数组 //每一个的元素均为一个图形标记，可以进行默认，也可以自己设置；
//data: [{ name: '系列1',// 强制设置图形为圆。icon: 'circle',// 设置文本为红色textStyle: {color: 'red'}}]
},
//直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
xAxis: {
// gridIndex:0,//x 轴所在的 grid 的索引，默认位于第一个 grid。
//position:'bottom', //值：'top'/'bottom' 默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧。
//offset:0, //X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。
//type:'category', //坐标轴类型。'value' 数值轴，适用于连续数据;'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据;'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度;//'log' 对数轴。适用于对数数据;
//name:'x', //坐标轴名称；
//nameLocation:'end', //坐标轴名称显示位置。'start'前/'middle' 或者 'center' 中/'end'后
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] //x轴的种类
},
//y轴相关数据
yAxis: {},
//图表类别
series: [{
name: '销量',
type: 'bar', //通过type决定展示的图表类型
//bar:柱状图、条形图；pie：饼图；line:折线图；scatter:气泡图；radar：雷达图；
data: [5, 20, 36, 10, 10, 20], //数值
lable:true
},{
name: '价格',
type: 'bar', //通过type决定展示的图表类型
//bar:柱状图、条形图；pie：饼图；line:折线图；scatter:气泡图；radar：雷达图；
data: [100, 60, 55,56, 75, 100], //数值
lable:true
}]
};
// 使用刚指定的配置项和数据显示图表。 //setOption 配置图表信息；
myChart.setOption(option);
</script>
</html>效果图:
