echarts參數詳解--散點圖

時間 2019-11-06
標籤 echarts 參數詳解散點圖简体版
原文原文鏈接
參考地址：http://www.cnblogs.com/weizhen/p/5907617.htmljavascript
<!--
一、首先須要下載包echarts.js，而後引入該包
-->
<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    <!--引入 ECharts 文件-->
    <script src="echarts.js"></script>
</header>


<!--
二、基本配置
//第一步調用echarts初始化函數,傳入dom對象產生echarts的instance
-->
<body>

<!--爲 ECharts 準備一個具有大小（寬高）的 DOM-->
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

    // 基於準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));

    //第二步構造數據
    var data1 = [];//數據區域縮放組件
    var data2 = [];
    var data3 = [];

    //構造隨機數
    var random = function (max){
        return (Math.random() * max).toFixed(3);
    };

    //將數據裝載到數組中
    for (var i = 0; i < 500; i++) {
        data1.push([random(15), random(10), random(1)]);
        data2.push([random(10), random(10), random(1)]);
        data3.push([random(15), random(10), random(1)]);
    };

    //三、配置option項
    //第三步就是使用echarts的option進行參數的配置
    option = {
        animation: false,//是否開啓動畫，默認是開啓的，true是開啓的,false是關閉的

        //圖例
        legend: {
            data: [
                {
                    name:'scatter2',
                    icon:'circle',//強制設置圖形長方形
                    textStyle:
                        {color:'red'}//設置文本爲紅色
                },
                {
                    name:'scatter',
                    icon:'rectangular',//強制設置圖形爲長方形
                    textStyle:
                        {color:'red'}//設置文本爲紅色
                },
                {
                    name:'scatter3',
                    icon:'rectangular',//強制設置圖形爲長方形
                    textStyle:
                        {color:'red'}//設置文本爲紅色
                }
            ],
            zlevel:5,//設置Canvas分層 zlevel值不一樣會被放在不一樣的動畫效果中,傳說中z值小的圖形會被z值大的圖形覆蓋
            z:3,//z的級別比zlevel低，傳說中z值小的會被z值大的覆蓋，但不會從新建立Canvas
            left:'center',//圖例組件離容器左側的距離。能夠是像 '20%' 這樣相對於容器高寬的百分比，也能夠是 'left', 'center', 'right'。
            //若是 left 的值爲'left', 'center', 'right'，組件會根據相應的位置自動對齊。
            top:'top',
            //rigth:'',
            //bottom:''
            width:'auto',//設置圖例組件的寬度，默認值爲auto,好像只可以使用px
            orient:'horizontal',//設置圖例組件的朝向默認是horizontal水平佈局，'vertical'垂直佈局
            align:'auto',//'left'  'right'設置圖例標記和文本的對齊，默認是auto
            //默認自動，根據組件的位置和 orient 決定，當組件的 left 值爲 'right' 以及縱向佈局（orient 爲 //'vertical'）的時候爲右對齊，及爲 'right'。
            padding:[20,20,20,20],//設置圖例內邊距 默認爲上下左右都是5，接受數組分別設定
            itemGap:20,//圖例每項之間的間隔，橫向佈局時爲水平間隔，縱向佈局時爲縱向間隔。默認爲10
            itemWidth:30,//圖例標記的圖形寬度，默認爲25
            itemHeight:20,//圖例標記的圖形高度，默認爲14
            //formatter:'Legend {name}'//圖例文本的內容格式器，支持字符串模板和回調函數兩種形式。
            formatter:function(name){
                return 'Legend  '+name;
            },
            //selectedMode:false,//圖例的選擇模式，默認爲開啓，也能夠設置成single或者multiple
            //selectedMode:'single'//圖例的選擇模式，默認爲開啓，也能夠設置成single或者multiple
            selectedMode:'multiple',//圖例的選擇模式，默認爲開啓，也能夠設置成single或者multiple
            inactiveColor:'#ccc',//圖例關閉時的顏色，默認是'#ccc'
            selected:{
                'scatter2':true,//設置圖例的選中狀態
                'scatter':false,
                'scatter3':false
            },
            tooltip: {//圖例的tooltip 配置，默認不顯示,能夠在文件較多的時候開啓tooltip對文字進行剪切
                show: true
            },
            //backgroundColor:'rgb(128, 128, 128)',//圖例的背景顏色，默認爲透明的
            //borderColor:'rgb(10, 150, 200)',//圖例的邊框顏色
            //borderWidth:2,//圖列的邊框線寬，默認爲1
            shadowBlur:30,//圖例陰影的模糊大小
            shadowColor:'rgb(128, 128, 56)'//陰影的顏色
        },

        //鼠標移上去的提示
        tooltip: {
        },

        //網格
        grid:{
            show:true,//是否顯示直角座標系的網格,true顯示，false不顯示
            left:100,//grid組件離容器左側的距離
            containLabel:false,//grid 區域是否包含座標軸的刻度標籤，在沒法肯定座標軸標籤的寬度，容器有比較小沒法預留較多空間的時候，能夠設爲 true 防止標籤溢出容器。

        },

        //X軸
        xAxis: {
            type: 'value',
            min: 'dataMin',
            name:'xAxis',//x軸的名稱
            nameLocation:'end',//x軸名稱的顯示位置'middle'，'end'
            nameRotate:30,//座標軸名字旋轉角度值
            max: 'dataMax',
            gridIndex:0,//x軸所在的grid的索引，默認位於第一個grid
            //offset:10,//x軸相對默認位置的偏移，在一個grid中含有多個grid的時候有意義
            type:'value',//數值軸適用於連續型數據
            //'category'類目軸 適用於離散的類目數據，爲該類型時必須經過 data 設置類目數據。
            //'time' //時間軸，適用於連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不一樣，例如會根據跨度的範圍來決定使用月，星期，日仍是小時範圍的刻度。
            //'log' 對數軸。適用於對數數據。
            position:'top',//x軸位於grid的上方仍是下方，默認爲bottom在下方
            inverse:false,//是否反向座標
            boundaryGap:['20%','20%'],//座標軸兩邊留白策略，類目軸和非類目軸的設置和表現不同。
            //類目軸中 boundaryGap 能夠配置爲 true 和 false。默認爲 true，這時候刻度只是做爲分隔線，標籤和數據點都會在兩個刻度之間的帶(band)中間。
            //非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的數組，分別表示數據最小值和最大值的延伸範圍，能夠直接設置數值或者相對的百分比，在設置 min 和 max 後無效
            splitLine: {
                show: true
            }
        },

        //Y軸
        yAxis: {
            type: 'value',
            min: 'dataMin',
            max: 'dataMax',
            splitLine: {
                show: true
            }
        },

        //數據區域縮放、滾動條
        dataZoom: [
            {
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                start: 1,
                end: 35
            },
            {
                type: 'slider',
                show: true,
                yAxisIndex: [0],
                left: '93%',
                start: 29,
                end: 36
            },
            {
                type: 'inside',
                xAxisIndex: [0],
                start: 1,
                end: 35
            },
            {
                type: 'inside',
                yAxisIndex: [0],
                start: 29,
                end: 36
            }
        ],

        //visualMap
        visualMap: {
            //type: 'continuous',//類型爲連續型。
            min: 0,//指定 visualMapContinuous 組件的容許的最小值。'min' 必須用戶指定。[visualMap.min, visualMax.max] 造成了視覺映射的『定義域』。
            max: 1000000,//指定 visualMapContinuous 組件的容許的最大值。'max' 必須用戶指定。[visualMap.min, visualMax.max] 造成了視覺映射的『定義域』。
            //setOption 改變 min、max 時 range 的自適應
            text:['High','Low'],//兩端的文本['High', 'Low']
            range:[0, 800000],//指定手柄對應數值的位置
            calculable:true,//表示是否設置了拖拽用的手柄，若是爲false則拖拽結束時，才更新視圖。若是爲ture則拖拽手柄過程當中實時更新圖表視圖。
            realtime: false,//表示拖拽時是否實時更新
            inverse:false,//是否翻轉組件
            precision:2,//展式的小數點精度
            itemWidth:30,//長條的寬度，默認爲20
            itemHeight:200,//長條的高度，默認是140
            align:'left',//組件中手柄和文字的擺放位置'auto'   (orient 爲 horizontal 時有效) 'left'  'right'    （rient 爲 vertical 時有效。）'top' 'bottom'
            textGap:20,//兩端文字與主體之間的距離
            show:true,//是否顯示數據映射組件
            dimension:0,//指定用數據的『哪一個維度』，映射到視覺元素上。『數據』即 series.data。 能夠把 series.data 理解成一個二維數組，
            seriesIndex:0,//指定去哪一個系列的數據
            hoverLink:true,//打開 hoverLink 功能時，鼠標懸浮到 visualMap 組件上時，鼠標位置對應的數值 在 圖表中對應的圖形元素，會高亮。
            //反之，鼠標懸浮到圖表中的圖形元素上時，在 visualMap 組件的相應位置會有三角提示其所對應的數值。
            //inRange: {//能定義目標系列（參見 visualMap-continuous.seriesIndex）視覺形式，也同時定義了 visualMap-continuous 自己的視覺樣式。
            //視覺通道
            //inRange 中，能夠有任意幾個的『視覺通道』定義（如 color、symbolSize 等）。這些視覺通道，會被同時採用。
            //通常來講，建議使用 透明度（opacity） ，而非 顏色透明度（colorAlpha） （他們細微的差別在於，前者能也同時控制圖元中的附屬物（如 label）的透明度，然後者只能控制圖元自己顏色的透明度）。
            //視覺映射的方式：支持兩種方式：線性映射、查表映射。
            //線性映射 表示 series.data 中的每個值（dataValue）會通過線性映射計算，從 [visualMap.min, visualMap.max] 映射到設定的 [visual value 1, visual value 2] 區間中的某一個視覺的值（下稱 visual value）。
            //查表映射 表示 series.data 中的全部值（dataValue）是可枚舉的，會根據給定的映射表查表獲得映射結果。
            /*color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
             symbolSize: [30, 100]//圖元的大小。*/
            // 表示 目標系列 的視覺樣式。

            //},
            /*target: {
             inRange: {
             symbol: 圖元的圖形類別。
             symbolSize: 圖元的大小。
             color: 圖元的顏色。
             colorAlpha: 圖元的顏色的透明度。
             opacity: 圖元以及其附屬物（如文字標籤）的透明度。
             colorLightness: 顏色的明暗度，參見 HSL。
             colorSaturation: 顏色的飽和度，參見 HSL。
             colorHue: 顏色的色調，參見 HSL。
             color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
             symbolSize: [60, 200]

             }
             },*/
            // 表示 visualMap-continuous 自己的視覺樣式。
            /*controller: {visualMap 組件中，控制器 的 inRange outOfRange 設置。若是沒有這個 controller     設置，控制器 會使用外層的 inRange outOfRange 設置；若是有這個 controller 設置，則會採用這個設置。適用於一些控制器視覺效果須要特殊定製或調整的場景。
             inRange: {
             symbolSize: [30, 100],
             symbol:['circle', 'rect', 'diamond'],
             color: ['#121122', 'rgba(3,4,5,0.4)', 'red']
             }
             },*/
            type:'piecewise',//表示分段型視覺映射組件（visualMapPiecewise）
            splitNumber:10,//對於連續型數據，自動切分紅幾段默認是5段
            pieces: [//每一段的範圍，以及每一段的文字，以及每一段的特別的樣式
                {min: 1500}, // 不指定 max，表示 max 爲無限大（Infinity）。
                {min: 900, max: 1500},
                {min: 310, max: 1000},
                {min: 200, max: 300},
                {min: 10, max: 200, label: '10 到 200（自定義label）'},
                {value: 123, label: '123（自定義特殊顏色）', color: 'grey'}, // 表示 value 等於 123 的狀況。
                {max: 5}     // 不指定 min，表示 min 爲無限大（-Infinity）。
            ],
            min:2,//指定 visualMapPiecewise 組件的最小值。
            max:5,//指定 visualMapPiecewise 組件的最大值。
            selectedMode:'multiple',//(多選)(單選)
            inverse:false,//是否反轉
            precision:2,//數據展現的小數精度
            itemWidth:20,//圖形的寬度，即每一個小塊的寬度。
            itemHeight:20,//圖形的高度，即每一個小塊的高度
            text:['High', 'Low'],//兩端的文本
            align:'auto',// 自動決定。'left' 圖形在左文字在右。'right' 圖形在右文字在左。
            textGap:20,//兩端文字主體之間的距離
            itemGap:10,//每兩個圖元之間的間隔距離，單位爲px。
            itemSymbol:'circle',//圖形的形狀 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            show:true,//是否顯示組件
            dimension:0,//指定用數據的『哪一個維度』，映射到視覺元素上。
            seriesIndex:0,//指定取哪一個系列的數據，即哪一個系列的 series.data。
            hoverLink:true,//打開 hoverLink 功能時，鼠標懸浮到 visualMap 組件上時，鼠標位置對應的數值 在 圖表中對應的圖形元素，會高亮。
            //inRange://參考visualMapContinuous
            //outOfRange://參考visualMapContinuous*/
            /*categories: [//用於表示離散型數據（或能夠稱爲類別型數據、枚舉型數據）的全集。
             'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
             ],*/
            /*inRange: {
             // visual value 能夠配成 Object：
             color: {
             'Warden': 'red',
             'Demon Hunter': 'black',
             '': 'green' // 空字串，表示除了'Warden'、'Demon Hunter'外，都對應到 'green'。
             },
             // visual value 也能夠只配一個單值，表示全部都映射到一個值，如：
             color: 'green',
             // visual value 也能夠配成數組，這個數組須和 categories 數組等長，
             // 每一個數組項和 categories 數組項一一對應：
             color: ['red', 'black', 'green', 'yellow', 'white']
             },*/
            /*outOfRange:{//定義 在選中範圍外 的視覺元素。
             color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
             symbolSize: [30, 100]
             },
             olor: ['orangered','yellow','lightskyblue']*/
        },


        //裝載數據
        series: [
            {
                name: 'scatter',
                type: 'scatter',
                itemStyle: {
                    normal: {
                        opacity: 0.8
                    }
                },
                symbolSize: function (val) {
                    return val[2] * 40;
                },
                data: data1
            },
            {
                name: 'scatter2',
                type: 'scatter',
                itemStyle: {
                    normal: {
                        opacity: 0.8
                    }
                },
                symbolSize: function (val) {
                    return val[2] * 40;
                },
                data: data2
            },
            {
                name: 'scatter3',
                type: 'scatter',//散點圖
                itemStyle: {
                    normal: {
                        opacity: 0.8,
                    }
                },
                symbolSize: function (val) {
                    return val[2] * 40;
                },
                data: data3
            }
        ]
    };

    // 使用剛指定的配置項和數據顯示圖表
    myChart.setOption(option);
</script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。