eCharts使用(二) 坐標系

在前面的例子中，我們使用了grid-直角坐標系網格,在 ECharts 3 中可以存在任意個 grid 組件。如下例我們構建兩個網格的圖表

option = {
    title://標題組件，包含主標題和副標題。
        {
            text: 'eCharts圖表測試',
            subtext: '兩個繪圖網格的測試',
            left: 'center',
            textStyle: {
                fontWeight: 'bold',
            }
        },
    grid: [
        {
            x: '7%', //左上角橫寬度
            y: '20%',//左上角豎寬度
            width: '38%',
        },
        {
            x2: '7%',//右下角
            y: '20%',//
            width: '38%',
        }],
    xAxis: [
        {
            gridIndex: 0,//所在的 grid 的索引
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        {
            gridIndex: 1,//所在的 grid 的索引
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']//類目數據
        }],
    yAxis: [
        {
            name: '銷售件數',//坐標軸名稱
            gridIndex: 0, //所在的 grid 的索引
            type: 'value'//坐標軸類型
        },
        {
            name: '銷售額',
            gridIndex: 1,
            type: 'value',
        }
    ],
    series: [
        {
            xAxisIndex: 0,
            yAxisIndex: 0,
            type: 'line',//圖表類型
            data: [15, 20, 36, 10, 10, 20, 20]
        }, {
            xAxisIndex: 1,
            yAxisIndex: 1,
            type: 'bar',
            data: [115, 210, 326, 320, 120, 220, 20]
        }
    ]
};
var myChart = echarts.init(document.getElementById('main'));//初始化一個 echarts 實例
myChart.setOption(option);// 使用剛指定的配置項和數據顯示圖表。

其中grid的x,y和x2,y2定義請參照上右圖. 本例中為防止圖表覆蓋標題，所以調整了grid的寬度和高度,line和bar可以這么做，但是如果是pie(餅圖)的話,就不能用grid來調整位置了，只能用pie自己的屬性來調整，例如我們將上面的折線圖改成餅圖后,我們的代碼需要這樣寫

option = {
    title://標題組件，包含主標題和副標題。
        {
            text: 'eCharts圖表測試',
            subtext: '兩個繪圖網格的測試',
            left: 'center',
            textStyle: {
                fontWeight: 'bold',
            }
        },
    grid: [
        {
            x: '7%',
            y: '20%',
            width: '38%',
        },
        {
            x2: '7%',
            y: '20%',
            width: '38%',
        }],
    xAxis: [
        {
            gridIndex: 0,//所在的 grid 的索引
            show: false,//不顯示x軸
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        {
            gridIndex: 1,//所在的 grid 的索引
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']//類目數據
        }],
    yAxis: [
        {
            name: '銷售件數',//坐標軸名稱
            show: false,//不顯示y軸
            gridIndex: 0, //所在的 grid 的索引
            type: 'value'//坐標軸類型
        },
        {
            name: '銷售額',
            gridIndex: 1,
            type: 'value',
        }
    ],
    series: [
        {
            type: 'pie',//圖表類型
            center: ['20%', '50%'],//餅圖的中心（圓心）坐標，數組的第一項是橫坐標，第二項是縱坐標
            radius: [0, '55%'],//餅圖的半徑，數組的第一項是內半徑，第二項是外半徑
            data: [
                {value: 335, name: '直接訪問'},
                {value: 310, name: '郵件營銷'},
                {value: 234, name: '聯盟廣告'},
                {value: 135, name: '視頻廣告'},
                {value: 1548, name: '搜索引擎'}
            ]
        },
        {
            xAxisIndex: 1,
            yAxisIndex: 1,
            type: 'bar',
            data: [115, 210, 326, 320, 120, 220, 20]
        }
    ]
};
var myChart = echarts.init(document.getElementById('main'));//初始化一個 echarts 實例
myChart.setOption(option);// 使用剛指定的配置項和數據顯示圖表。

坐標系除了直角坐標系以外,還有極坐標系,雷達圖坐標系和地理坐標系,下面是極坐標系,雷達圖坐標系的例子

option = {
    title://標題組件，包含主標題和副標題。
        {
            text: 'eCharts圖表測試',
            subtext: '兩種坐標系的測試',
            left: 'center',
            textStyle: {
                fontWeight: 'bold',
            }
        },
    polar: {
        center: ['30%', '50%'],//極坐標系的中心（圓心）坐標，數組的第一項是橫坐標，第二項是縱坐標。
        radius:'70%'
    },
    radiusAxis: {},
    angleAxis: {
        type: 'category',
        polarIndex: 0,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],

    },
    radar: {
        center: ['75%', '50%'],
        radius: '75%',
        indicator: [
            {name: '銷售', max: 6500},
            {name: '管理', max: 16000},
            {name: '信息', max: 30000},
            {name: '客服', max: 38000},
            {name: '研發', max: 52000},
            {name: '市場', max: 25000}
        ]
    },
    series: [
        {
            type: 'scatter',
            coordinateSystem: 'polar',
            data: [115, 210, 326, 320, 120, 220, 20]
        },
        {
            type: 'radar',
            radarIndex: 0,
            data: [{
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: '預算分配（Allocated Budget）'
            }]
        }

    ]
};
var myChart = echarts.init(document.getElementById('main'));//初始化一個 echarts 實例
myChart.setOption(option);// 使用剛指定的配置項和數據顯示圖表。