1、在线引用
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
2、使用
<div id="container"></div>
jQuery(document).ready(function ($) {
var jsonStr = [{
capacity: "29",
containTax: "0",
createDate: "2019-06-25 18:20:59",
financialexpenses: 0,
laborcosts: 0,
managementcosts: 0,
manufacturingcosts: 0,
model: "28",
number: "30",
price: 0,
profitbonus: 0,
proposeMoney: 0,
salecosts: 0,
sumMoney: 7676,
totalCostMoney: 0,
totalcost: 0,
}, {
capacity: "29",
containTax: "0",
createDate: "2019-06-26 18:20:59",
financialexpenses: 0,
laborcosts: 0,
managementcosts: 0,
manufacturingcosts: 0,
model: "28",
number: "30",
price: 0,
profitbonus: 0,
proposeMoney: 0,
salecosts: 0,
sumMoney: 769,
totalCostMoney: 0,
totalcost: 0
}, {
capacity: "29",
containTax: "0",
createDate: "2019-06-27 18:20:59",
financialexpenses: 0,
laborcosts: 0,
managementcosts: 0,
manufacturingcosts: 0,
model: "28",
number: "30",
price: 0,
profitbonus: 0,
proposeMoney: 0,
salecosts: 0,
sumMoney: 300,
totalCostMoney: 0,
totalcost: 0
}, {
capacity: "29",
containTax: "0",
createDate: "2019-06-28 18:20:59",
financialexpenses: 0,
laborcosts: 0,
managementcosts: 0,
manufacturingcosts: 0,
model: "28",
number: "30",
price: 0,
profitbonus: 0,
proposeMoney: 0,
salecosts: 0,
sumMoney: 7670,
totalCostMoney: 0,
totalcost: 0
}, {
capacity: "29",
containTax: "0",
createDate: "2019-06-29 18:20:59",
financialexpenses: 0,
laborcosts: 0,
managementcosts: 0,
manufacturingcosts: 0,
model: "28",
number: "30",
price: 0,
profitbonus: 0,
proposeMoney: 0,
salecosts: 0,
sumMoney: 766,
totalCostMoney: 0,
totalcost: 0
}, {
capacity: "29",
containTax: "0",
createDate: "2019-06-29 18:20:59",
financialexpenses: 0,
laborcosts: 0,
managementcosts: 0,
manufacturingcosts: 0,
model: "28",
number: "30",
price: 0,
profitbonus: 0,
proposeMoney: 0,
salecosts: 0,
sumMoney: 766,
totalCostMoney: 0,
totalcost: 0
}, {
capacity: "29",
containTax: "0",
createDate: "2019-06-29 18:20:59",
financialexpenses: 0,
laborcosts: 0,
managementcosts: 0,
manufacturingcosts: 0,
model: "28",
number: "30",
price: 0,
profitbonus: 0,
proposeMoney: 0,
salecosts: 0,
sumMoney: 766,
totalCostMoney: 0,
totalcost: 0
}, {
capacity: "29",
containTax: "0",
createDate: "2019-06-29 18:20:59",
financialexpenses: 0,
laborcosts: 0,
managementcosts: 0,
manufacturingcosts: 0,
model: "28",
number: "30",
price: 0,
profitbonus: 0,
proposeMoney: 0,
salecosts: 0,
sumMoney: 766,
totalCostMoney: 0,
totalcost: 0
}, {
capacity: "29",
containTax: "0",
createDate: "2019-06-29 18:20:59",
financialexpenses: 0,
laborcosts: 0,
managementcosts: 0,
manufacturingcosts: 0,
model: "28",
number: "30",
price: 0,
profitbonus: 0,
proposeMoney: 0,
salecosts: 0,
sumMoney: 766,
totalCostMoney: 0,
totalcost: 0
}];
getEcharts(jsonStr)
});
function getEcharts(datas) { //datas是数组
$("#container").css("height", (window.screen.height-30)+"px")
var labelsArrs = [];
$.each(datas, function (index, el) {
labelsArrs.push(el.createDate);
});
var orderNumberArrs = [];
$.each(datas, function (index, el) {
orderNumberArrs.push(el.sumMoney);
});
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
yAxis: {
type: 'category',
data: labelsArrs,
inverse:true,
nameRotate: 90, //坐标轴名字旋转,角度值。
axisLabel: { //坐标轴刻度标签的相关设置。
rotate: 270, //刻度标签旋转的角度,
formatter: function (s) {
var months=s.split('-');
var days=(months[2].split(" "))[0];
var params=months[1]+"-"+days;
var newParamsName = ""; // 最终拼接成的字符串
var paramsNameNumber = params.length; // 实际标签的个数
var provideNumber = 6; // 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话,需要显示几行,向上取整
/** * 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = ""; // 表示每一次截取的字符串
var start = p * provideNumber; // 开始截取的位置
var end = start + provideNumber; // 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr; // 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
},
},
grid: {
top: 100,
left: 40, // 调整这个属性
right: 40,
bottom:30,
},
xAxis: {
position:'top',
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置。
rotate: 90 //刻度标签旋转的角度,
},
},
tooltip: {
trigger: 'item', //item axis
extraCssText:'transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);',
position:'top',
label: {
backgroundColor: 'orange',
borderColor: '#eee',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
textStyle: {
color: '#222'
}
},
},
series: [{
data: orderNumberArrs,
type: 'line',
smooth: true,
showSymbol: true,
symbol: 'emptyCircle', // circle emptyCircle
symbolSize: 10, //设定实心点的大小
animation: true,
itemStyle: { //圆圈样式
borderWidth: 2,
color: '#7fb5e4',
},
lineStyle: { //线条样式
width: 2,
color: '#7fb5e4',
},
formatter: function (params) {
console.log(params)
return params.value + '元';
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#333',
fontSize: 20,
fontWeight: 400
}
}
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
window.onresize =myChart.resize()
}
}
3、注意事项:
extraCssText可以修改tooltip组件的样式;
position修改tooltip组件的位置;
tooltip: {
trigger: 'item', //item axis
extraCssText:'transform:rotate(90deg);-ms-transform:rotate(9deg);-moz-transform:rotate(9deg);-webkit-transform:rotate(9deg);-o-transform:rotate(9deg);', //设置旋转的样式
},