function initChart() {
let option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
crossStyle: {
color: '#fff'
}
},
axisLabel: {
interval: 0,
margin: 20,
verticalAlign: 'top',
formatter: function(value) {
var ret = ""; //拼接加\n返回的类目项
var maxLength = 8; //每项显示文字个数
value = value.split("");
value = value.join(" ");
var valLength = value.length; //X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN >= 2) //如果类目项的文字大于3,
{
for (var i = 0; i < rowN; i++) {
var temp = ""; //每次截取的字符串
var start = i * maxLength; //开始截取的位置
var end = start + maxLength; //结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = value.substring(start, end) + "\n"+ "\n";
ret += temp; //凭借最终的字符串
}
return ret;
} else {
return value;
}
},
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '10%',
data:[10, 502, 500, 334],
itemStyle: {
//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
emphasis: {
barBorderRadius: 30
},
normal: {
<!--柱状图的渐变色 设置-->
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00d3ff'
}, {
offset: 1,
color: '#2453f5'
}]),
//柱形图圆角设置，初始化效果
barBorderRadius:[30, 30, 0, 0]
}
}
},
},
{
name:'平均温度',
type:'line',
data:[20, 702, 603,505],
itemStyle: {
//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
emphasis: {
barBorderRadius: 30
},
normal: {
color:'#29c872',
<!--设置 线性图的 实 和 虚 线-->
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
},
//柱形图圆角，初始化效果
barBorderRadius:[30, 30, 0, 0],
}
}
},
}
]
};
let myChart = echarts.init(document.getElementById('echartBox'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
<!--注 echarts须有宽高 参照网上 大神 ，留一个笔记-->
