折线图
(1)引入官方的js资源
(2)界面上可以放一个空的div
<div class="chart" id="barChart" > </div>
加载图表的js
function barChart(){
var myChart = echarts.init(document.getElementById('barChart'));//找到空的div
option = {
tooltip : {
trigger: 'axis',
//控制浮动提示框的位置,自定义function各个参数
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 60;
} else { // 左边放的下
x = 60;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY;
}
return [x, y];
}
},
legend: {
data:['基金实缴总规模(亿元)', '本年已投放规模(亿元)']
},
calculable : true,
grid:{
show:false,//是否显示直角坐标系网格。[ default: false ]
left:"25%",//grid 组件离容器左侧的距离。
right:"15%"
},
xAxis : [
{
axisLine: {
show: false
},
splitLine:{
show:false
},
axisTick: {
show: false
},
type : 'value',
}
],
yAxis : [
{
axisLabel:{
formatter : function (value)
{
let valueTxt = '';
if (value.length > 5) {
valueTxt = value.substring(0, 5) + '...';
}//这里做出判断,处理字符串长度,大于5的时候,添加省略号处理
else {
valueTxt = value;
}
return valueTxt ;
},
},
axisLine: {
show: false,
},
splitLine:{
show:false
},
axisTick: {
show: false
},
type : 'category',
data : []
}
],
series : [
{
name:'基金实缴总规模(亿元)',
type:'bar',
color:'#38d2f7',
data:[]
},
{
name:'本年已投放规模(亿元)',
type:'bar',
color:'#0edbb2',
data:[]
}
]
};
$.ajax({ //加载坐标轴的数据
url:'/getTzfx.do',
type:'post',
async : false, //同步执行
dataType:'json',
success: function(data) {
if (data.status) {
var obj = data.data;
for (var i = 0; i < obj.length; i++) {
option.yAxis[0].data.push(obj[i].jjmc);
option.series[0].data.push(obj[i].jjsjgm);
option.series[1].data.push(obj[i].bnytfgm);
}
}
}
});
myChart.setOption(option);
}
关键是要在 axisLabel里边自定义formatter的function
效果如下,超过五个字符,添加省略号处理