eCharts使用 坐标系

Posted 2020-10-24 caiyanlin

在前面的例子中，我们使用了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);// 使用刚指定的配置项和数据显示图表。