echarts 折線圖雙y軸顯示 去掉背景線 設置鼠標移動上去的氣泡字體左對齊(文末附帶完整代碼)

說明:網絡引用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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章