echarts（4.0版本）

時間 2019-12-15

標籤 echarts 4.0 版本简体版

原文原文鏈接

一、echarts 開發文檔：https://echarts.baidu.com/echarts2/doc/doc.html 或 https://echarts.baidu.com/option.html#series-map.type （官網）html

　　或 https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-mec528xa.html(w3C 教程)編程

二、echarts屬性詳細介紹： https://blog.csdn.net/zx11_11/article/details/82854537canvas

三、ECharts Map 屬性詳解： http://www.javashuo.com/article/p-snskbnvg-ch.htmlsegmentfault

四、數據可視化echarts.js使用指南：http://www.javashuo.com/article/p-appjhxwp-gu.htmlapi

我的：地圖、離散型的圖和通常規則的數據圖標是有區別的。echarts

學習echarts就是學習 option 配置項框架

一、backgroundColor ：整個canvas背景色，默認無背景。https://www.echartsjs.com/option.html#backgroundColoride

二、title ：標題組件，包含主標題和副標題。 https://www.echartsjs.com/option.html#title工具

　標題組件中包括對這個標題的文字、顏色、字體等屬性的設置。學習

三、tooltip ：提示框組件。https://www.echartsjs.com/option.html#tooltip

四、visualMap ：是視覺映射組件。 https://www.echartsjs.com/option.html#visualMap

　　如：地圖左側小導航圖標

五、series ：系列列表。每一個系列經過 type 決定本身的圖表類型 https://www.echartsjs.com/option.html#series

(series 裏面的配置就是數據，在data裏面配置，好比地圖，一個地點上配置相應的數據。若是有多組數據，那就有多個對象的數據)

　　5.一、data對象裏面的數據對應地圖每一塊的數據（name和value）。框架內部設置好了，name的值會和地圖上對應的哪個匹配上。

　 5.二、markPoint 對象中的 data 值有 3種座標系的表示法：https://www.echartsjs.com/option.html#series-map.markPoint.data

　　　　具體的地理座標，能夠經過座標拾取器獲取。（echarts地圖中是內置了代理座標的）

markPoint: {
          symbol: 'circle',
          symbolSize: 10,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'red' // 0% 處的顏色
              }, {
                offset: 1, color: 'blue' // 100% 處的顏色
              }],
              globalCoord: false // 缺省爲 false
            }
          },
          data: [
            {
              name: '某個屏幕座標',
              coord: [115.857963, 28.683016]
            }
          ]
        },

View Code

六、geo ：地理座標系組件。https://www.echartsjs.com/option.html#geo

echarts 視頻聽課筆記（echarts 3.0）

1、常見圖形組件：

標題、工具欄、圖例、提示框。。。
1. visualMap 視覺映射組件，在echarts 2.0中是 dataRange 配置項。 https://echarts.baidu.com/option.html#visualMap (目前知道的，地圖映射的數據，是該地區的數據總和)
座標軸
- X軸
- Y軸
markline 標記線：（通常都是在series 下面的配置）
- 常見標記：最大值、最小值、平均值。
markpoint 標記點：（通常都是在series 下面的配置）
- 常見標記：最大值、最小值、平均值、以及任意位置的標記點。

2、柱狀圖：

3、折線圖：

4、

實踐總結：

1、地圖

一、series.label 地圖上各個板塊對應省份的中文名稱的設置。（normal，正常、未觸發是否顯示；emphasis，鼠標滑動到對應的板塊，是否顯示）

        series:{
            type:'map',
            name:'全國',
            map:'china',
            label:{
                normal:{
                    show:true // 正常顯示時，顯示省份名稱
                },
                emphasis:{
                    show:true // 鼠標滑動上去時，顯示省份名稱
                }
            }
        }

View Code

二、series.itemStyle 地圖區域的多邊形圖形樣式。就是地圖上全部板塊之間，邊框線條的配置。（如，顏色，粗細等）

三、series.markPoint 標註。能夠設置圖形或文本進行標註。

itemStyle 標註的樣式。

data[i].label.normal.position 標註中文字，相對於標註圖形的位置。

 markPoint: {
                symbol: 'circle',
                symbolSize: 35,
                itemStyle: {
                    normal: {
                        color: 'red'
                    }
                },
                data: [
                    {
                        name: '某個座標',
                        coord: [115.892151, 28.676493],
                        value: '100',
                        label:{
                            normal:{
                                show:true,
                                position:'top'
                            }
                        }
                    }
                ]
            }

View Code