ECharts，一个使用 JavaScript 实现的开源可视化库，可以运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
官方文档传送门：http://echarts.baidu.com/option.html，记得div要设置长宽才能绘制，不然不显示
双y轴
yAxis: [
{
type: 'value',
name: '数量(百粒)',
min: 0,
max: maxY1,
interval: parseInt(maxY1)/5,
splitLine : {//去掉网格线
show : true
},
axisLabel: {
formatter: '{value} '
}
},
{
type: 'value',
name: '份数(份)',
min: 0,
max: maxY2,
interval: parseInt(maxY2)/5,
splitLine : {//去掉网格线
show : false
},
axisLabel: {
formatter: '{value} '
}
}
],
series: [
{
name:'数量',
type:'line',
tooltip:{
trigger:'axis'
},
smooth:true,
itemStyle : { normal: {label : {show: true}}},
data:scsl
},
{
name:'份数',
type:'line',
tooltip:{
trigger:'axis'
},
smooth:true,
yAxisIndex: 1,
itemStyle : { normal: {label : {show: true}}},
data:jhfs
}
]一些参数说明：
- smooth:true //可选true和false，默认false，true表示曲线，false表示折线
- yAxisIndex: 1 //双y轴配置好后，在需要使用右边y轴的地方配置此项
- itemStyle : { normal: {label : {show: true}}} //是否在折线图上显示数据，true为展示，默认false
坐标轴指示器
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line' // 默认为直线，可选为：'line' | 'shadow'
}
},关于坐标轴指示器，这么解释可能有点苍白，上图吧，图一type为‘shadow’，图二为‘line’
图形不从0刻度开始以及柱状图文字显示位置
设置containLabel为true表示不紧靠着y轴，即柱状图不从0刻度开始
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}设置柱状图文字是否显示以及文字显示位置，可选项有
-
'top'
- 'left'
- 'right'
- 'bottom'
- 'inside'
- 'insideLeft'
- 'insideRight'
- 'insideTop'
- 'insideBottom'
- 'insideTopLeft'
- 'insideBottomLeft'
- 'insideTopRight'
- 'insideBottomRight'
看着应该就知道文字位置了
label: {
normal: {
show: false,
position: 'insideTop'
}
}自定义图形的颜色
如折线图的折线颜色，柱状图的柱子颜色，放在series要设置的对应图形下
itemStyle: {
normal: {
color:"#CCC",
lineStyle: {
color: "#CCC"
},
label : {
show: true
}
}
}堆叠柱状图只显示总和
下面是一个完整的折线图和堆叠柱状图的示例，堆叠柱状图只显示总和，两个数据的和可以通过后台统计返回，也可以在js函数里面格式化，还可以在label｛formatter｛｝｝中格式化
function paintCurve(id,XData,scsl,jhfs,maxY1,maxY2) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(id));
// 指定图表的配置项和数据
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data:['数量','份数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
},
xAxis: {
type: 'category',
boundaryGap: true,
data: XData
},
yAxis: [
{
type: 'value',
name: '数量(百粒)',
min: 0,
max: maxY1,
interval: parseInt(maxY1)/5,
splitLine : {//去掉网格线
show : true
},
axisLabel: {
formatter: '{value} '
}
},
{
type: 'value',
name: '份数(份)',
min: 0,
max: maxY2,
interval: parseInt(maxY2)/5,
splitLine : {//去掉网格线
show : false
},
axisLabel: {
formatter: '{value} '
}
}
],
series: [
{
name:'数量',
type:'line',
tooltip:{
trigger:'axis'
},
smooth:true,
itemStyle : { normal: {label : {show: true}}},
data:scsl
},
{
name:'份数',
type:'line',
tooltip:{
trigger:'axis'
},
smooth:true,
yAxisIndex: 1,
itemStyle : { normal: {label : {show: true}}},
data:jhfs
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
function paintHistogram(id,title,yAxisName,xData,Y,wwc,ywc,total) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(id));
option = {
title: {
text: title
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
x: 'right',
data: ['未完成数量','已完成数量']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: xData,
axisLabel : {//坐标轴刻度标签的相关设置。
formatter : function(params){
return params;
}
}
},
yAxis: {
type: 'value',
name: yAxisName,
min: 0,
max: Y,
interval: parseInt(Y)/5,
},
series: [
{
name: '未完成数量',
type: 'bar',
stack: '总量',
label: {
normal: {
show: false,
position: 'insideTop'
}
},
data: wwc
},
{
name: '已完成数量',
type: 'bar',
stack: '总量',
label: {
normal: {
show: false,
position: 'top'
}
},
data: ywc
},
{
name: '合计',
type: 'bar',
stack: '总量',
label: {
normal: {
offset:['50','80'],
show: true,
position: 'insideBottom',
formatter:'{c}',
textStyle:{color:"#000"}
}
},
itemStyle:{
normal:{
color:'rgba(255,255,255,0)'
}
},
data: total
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}