图形报表echarts的使用1--折线图 博客分类： 图形报表echarts echarts折线图
ECharts，缩写来自Enterprise Charts，商业级数据图表，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
1、为ECharts准备一个具备大小（宽高）的Dom。
<div id="chart" style="height: 800px; width: 980px;"></div>
2、新建<script>标签引入模块化单文件echarts.js
<script src="${ctx}/resources/echarts/echarts.js"></script>
3、新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js）
// 路径配置
require.config({
paths: {
echarts: '${ctx}/resources/echarts' //echarts类库的根路径
}
});
4、<script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成
// 使用
require(
[
'echarts',
'echarts/chart/line',// 使用柱状图就加载line模块，按需加载
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
requireCallback //回调函数
);
//ec参数
function requireCallback (ec) {
echarts = ec;
myChart = echarts.init(document.getElementById('chart'));// 图表初始化的地方，在页面中要有一个地方来显示图表，他的ID是main
myChart.setOption(option); //显示图形
}
option = {
title : {--标题
text : '组合图',
textStyle:{ --文本样式
fontSize:18,
fontWeight: 'bolder',
color: '#000000'
},
subtext:'${title}',--子标题
subtextStyle:{ --子标题样式
fontSize: 14,
fontWeight: 'bolder',
color: '#ff0000'
},
x: "center", //标题水平方向位置
y:'top' //放置在上面
},
tooltip : { --气泡提示配置
trigger: 'axis'
},
toolbox: {--右上角是否显示
show : true,
feature : {
mark : {show: false},
dataView : {show: true, readOnly: true},--是否显示数据及设置只读属性
magicType : {show: true, type: ['line', 'bar']},--图例类型，这里的集合包含在配置使用的加载类库中
restore : {show: true},
saveAsImage : {show: true}--是否显示保存图片
}
},
legend: {--图例配置
data:['组合','组合1','组合2','组合3'],
y:'bottom'
},
calculable : false, //是否启用拖拽重计算特性（********true的话，折线较宽 折线的宽带有差异）
xAxis : [
{
type : 'category',坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
boundaryGap : false,//坐标轴两端空白策略，数组内数值代表百分比
data : ${datesCharts},
name : '日期'
}
],
yAxis : [
{
axisLabel : {
formatter: function (value) {
return value + '%';
}
},
type : 'value',//坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
name : '收益'
//boundaryGap : false,//坐标轴两端空白策略，数组内数值代表百分比
//boundaryGap : [0.9,0.5],
//,splitNumber: 4 // 数值轴用，分割段数，默认为5
}
],
series : [
{
name:'组合',// 系列名称
type:'line',// 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
//stack: '总量', //堆积 总量的统计
itemStyle: {
normal: {
label : {show: false, position: 'left'}, //在坐标轴交叉的地方是否显示值，及显示的位置
color:'#cbccb2',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'dotted'
}
}
},
data:${totalRevenueCharts1}
},
{
name:'组合1',
type:'line',
//stack: '总量',
itemStyle: {normal: {
label : {show: false, position: 'left'},
color:'#ff0000',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'solid'
}
}},
data:${manCangCharts}
}
,
{
name:'组合2',
type:'line',
//stack: '总量',
itemStyle: {normal: {
label : {show: false, position: 'left'},
color:'#00cc00',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'dashed'
}
}},
data:${kongCangCharts}
},
{
name:'组合3',
type:'line',
//stack: '总量',
itemStyle: {
normal: {
label : {show: false, position: 'left'},
color:'#0000ff'
}
/*, --在饼状图下有效
emphasis: {
label: {
show: true,
position: 'outer'
},
labelLine: {
show: true,
lineStyle: {
color: 'red'
}
}
}*/
},
data:${shangzhengCharts}
}
]
};
效果图：
