ECharts 圖表設置標記的大小 symbolSize 和獲取標記的值

ECharts 是百度出品，一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。

慕課網 http://www.imooc.com/learn/687 上有學習視頻，可快速上手。

公司之前開發的 webapp 中有用到 ECharts 圖表，可是在兩個問題上一直解決不了，查找了很多方法，官網的配置參數也找了個遍，花了很多時間終於解決了問題：

一、設置圖表標記的大小

最終效果：

圖中空心圓圈的大小可設置，根據官網配置項查詢到，它屬於標記大小。

數組 series 中其中一個對象的屬性 symbolSize 的值

初始值為 4，我將其設置為了 14：

series: [
    {
        name: '綜合評分',
        type: 'line',
        stack: '總量',
        data: [<volist name="list" id="vv">{$vv.score},</volist>],
        symbolSize: 14, // 圖表的點的大小
        itemStyle: {
            normal: {
                color: '#03a1ea'
            }
        }
    }
]

 

二、獲取圖表標記的值

有時候，我們需要使用圖表標記對應的值。也就是那個空心圓圈對應的值。

在我的項目中需求是這樣：點擊空心圓圈，在下方顯示其對應的值(也就是最新綜合評分的數值)。

myChart.on('click',function(params){
    $("#scroe").text(parseInt(params.value));
})

代碼解釋：

1. myChart 為初始化 echarts 時賦予的變量名：

var myChart = echarts.init(document.getElementById('main')); //main 為 echarts 圖表所被限制的用於繪圖的框

2. params 是函數變量名，params.value 相當於當前點擊的圓圈的值。

3. parseInt 是將結果取整數。

獲取結果如下：