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>
效果图: