說明:網絡引用echarts.js和直接下載echarts引用的樣式可能會不一致,需要對摺線的樣式和字體進行修改的請參考我的另外一篇文章https://blog.csdn.net/Wangwangwang___/article/details/81317732
1、下載echarts文件引用的樣式(修改後)
2、網絡引用的樣式(修改後)
3、代碼說明:
4、完整代碼
<div id="main" class="echartsDiv"></div>
<script type="text/javascript">
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line',//折線圖
'echarts/chart/bar' // 使用柱狀圖就加載bar模塊,按需加載
],
function (ec) {
// 基於準備好的dom,初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
option = {
title : {
text: "重點區域水體分佈(單位:平方公里)",
x:'center',
y:'top',
},
tooltip: {
trigger: 'axis',
textStyle:{align:'left'}
},
legend: {
data:['水體面積','上月面積差值'],
y:'26'
},
grid: {
top: '22%',
left: '1%',
right: '1%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['2018-05','2018-06','2018-07','2018-08']
},
yAxis: [
{
name: '水體面積',
type: 'value',
max: 50,
splitLine:{show: false}
},
{
name: '上月面積差值',
nameLocation: 'start',
max: 2,
type: 'value',
splitLine:{show: false}
}
],
series: [
{
name:'水體面積',
type:'line',
data: [49,48,50,49],
itemStyle : { normal: {label : {show: true, position: 'top',textStyle:{color:'#B42E29'}}}},
},
{
name:'上月面積差值',
type:'line',
yAxisIndex:1,
data: [1,-1,2,1],
itemStyle : { normal: {label : {show: true, position: 'bottom',textStyle:{color:'#2D3E4C'}}}},
}]
};
// 爲echarts對象加載數據
myChart.setOption(option);
}
);
</script>