技術標籤：js

效果

程式碼：
html

//注意一定要寫寬高
 <div id="main1" style="width:500px;height:260px"></div>

//獲取曲線圖
function GetLine() {
    var img = "https://www.easyicon.net/api/resizeApi.php?id=1236453&size=32";
    //第一種方法：在data裡面寫，自定義每個資料的拐點圖片比如 { value: 221, symbol: "image://https://www.easyicon.net/api/resizeApi.php?id=1298746&size=24",symbolSize:10}
 

    var datas = [280, { value: 221, symbol: "image://https://www.easyicon.net/api/resizeApi.php?id=1298746&size=24",symbolSize:10}, 227, 220, 218, 135, 147];
        var chartDom = document.getElementById('main1');
        var myChart = echarts.init(chartDom);
        var option;

        option =
 
 {
            xAxis: {
                type: 'category',
                data: ['麥賽小學1', '麥賽小學2', '麥賽小學3', '麥賽小學4', '麥賽小學5', '麥賽小學6', '麥賽小學7']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: datas,
                type: 'line'
 
,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: "#015EE0",//折現顏色
                        }
                    }
                },
                //第二種方法：設定所有拐點，同一個圖片
                symbol: "image://https://www.easyicon.net/api/resizeApi.php?id=1236453&size=32",
                symbolSize: 8,//拐點大小
                showAllSymbol: true,
            }],
        };

        option && myChart.setOption(option);
}

踩坑筆記：一開始用symbol屬性，怎麼也不出來，以為是路徑錯了，一直改。結果發現是：
兩條//的原因，一開始我以為//是我自己的圖片路徑而已，不是的！
symbol:“image://url”
url是路徑，前面的兩條// 是必須要帶的！！這個屬性是symbol:"image://你的圖片地址