ECharts——柱狀圖+散佈座標

 option = {
            title: [
                {
                    text: '',
                    left: 'center'
                }
            ],
            //當trigger爲’item’時只會顯示該點的數據,
            //爲’axis’時顯示該列下所有座標軸所對應的數據。
            //提示框組件
            tooltip: {
                //?觸發類型
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category', //category:類目軸(適用於離散無序數組)
                data: ['a','b','c','d','e'],
                splitLine:{
                    show: true
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#595959", //X軸文字顏色
                        fontSize:14       // x軸文字大小
                    },
                    interval:0,         // 刻度間隔
                    rotate:0,          // 傾斜角度
                    align: 'center',    // x軸文字居中
                    margin: 20          // 文字與x軸的間隔
                },
                axisTick:{
                    show:false      // 隱藏座標軸上的刻度
                },
                axisLine: {
                    symbol:['none','path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20'],
                    symbolOffset: 10,
                    symbolSize: [35,35]
                }
            },
            yAxis: {
                type: 'category',
                scale:true,
                data:['y1','y2','y3','y4','y5'],
                name: "",
                splitLine:{
                    show: true
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#595959", //y軸文字顏色
                        fontSize:14       // y軸文字大小
                    },
                    formatter: '{value}'
                },
                axisTick:{
                    show:false      // 隱藏座標軸上的刻度
                },
                axisLine: {
                    // y軸箭頭
                    symbol:['none','path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20'],
                    symbolOffset: 10,
                    symbolSize: [35,35]
                }
            },
            series: [
                // bar: 柱狀圖; line: 直線
                {
                    name: '',
                    type: 'scatter', // 散佈類型
                    data: [
                        [3,3]
                    ],
                    itemStyle: {
                        normal: {
                            color: '#1F6AFB',
                            opacity: 0.6
                        }
                    },
                    // 圖標
                    symbol: 'path://M541.681664 600.920064l17.737728-37.926912c81.2032-22.923264 140.716032-97.560576 140.716032-186.10176 0-106.788864-86.571008-193.357824-193.357824-193.357824-106.790912 0-193.359872 86.56896-193.359872 193.357824 0 88.539136 59.510784 163.176448 140.716032 186.10176l17.809408 38.08256c-248.455168 4.349952-443.752448 48.795648-443.752448 102.981632 0 57.071616 216.608768 136.40704 483.807232 136.40704 267.200512 0 483.807232-79.335424 483.807232-136.40704C995.807232 649.119744 795.056128 604.196864 541.681664 600.920064zM358.578176 376.89344c0-81.84832 66.351104-148.199424 148.201472-148.199424 81.846272 0 148.199424 66.351104 148.199424 148.199424s-66.351104 148.199424-148.199424 148.199424C424.92928 525.092864 358.578176 458.74176 358.578176 376.89344zM506.7776 675.549184l30.5152-65.243136c79.31904 2.779136 140.066816 18.434048 140.066816 37.328896 0 20.862976-74.031104 37.769216-165.357568 37.769216-91.324416 0-165.357568-16.908288-165.357568-37.769216 0-18.071552 55.586816-33.169408 129.828864-36.88448L506.7776 675.549184zM476.358656 610.5088c-99.790848 3.620864-175.777792 22.171648-175.777792 44.517376 0 24.938496 94.656512 59.604992 211.421184 59.604992s211.421184-34.668544 211.421184-59.604992c0-23.107584-81.262592-42.160128-186.075136-44.836864l2.4576-5.257216c130.38592 3.170304 231.954432 28.370944 231.954432 58.99264 0 32.768-116.29568 66.820096-259.756032 66.820096-143.458304 0-259.756032-34.052096-259.756032-66.820096 0-29.810688 96.256-54.482944 221.646848-58.691584L476.358656 610.5088zM512 786.685952c-208.982016 0-378.39872-51.802112-378.39872-99.536896 0-44.648448 148.224-81.385472 338.403328-85.950464l1.806336 3.864576c-165.431296 4.046848-293.926912 34.052096-293.926912 70.467584 0 39.17824 148.692992 93.638656 332.118016 93.638656s332.118016-54.460416 332.118016-93.638656c0-37.1712-133.881856-67.66592-304.27136-70.688768l1.806336-3.862528c195.125248 3.457024 348.747776 40.71424 348.747776 86.167552C890.400768 734.88384 720.986112 786.685952 512 786.685952z',
                    symbolSize: '30'
                }

            ]
        };

 

 

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