244Echarts - 3D 散点图(3D Scatter with Scatter Matrix)

简介: 244Echarts - 3D 散点图(3D Scatter with Scatter Matrix)
效果图

源代码
$.get('data/asset/data/life-expectancy-table.json', function (data) {
    var sizeValue = '57%';
    var symbolSize = 2.5;
    option = {
        tooltip: {},
        grid3D: {
            width: '50%'
        },
        xAxis3D: {},
        yAxis3D: {},
        zAxis3D: {},
        grid: [
            {left: '50%', width: '20%', bottom: sizeValue},
            {left: '75%', width: '20%', bottom: sizeValue},
            {left: '50%', width: '20%',  top: sizeValue},
            {left: '75%', width: '20%', top: sizeValue}
        ],
        xAxis: [
            {type: 'value', gridIndex: 0, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
            {type: 'category', gridIndex: 1, name: 'Country', boundaryGap: false, axisLabel: {rotate: 50, interval: 0}},
            {type: 'value', gridIndex: 2, name: 'Income', axisLabel: {rotate: 50, interval: 0}},
            {type: 'value', gridIndex: 3, name: 'Life Expectancy', axisLabel: {rotate: 50, interval: 0}}
        ],
        yAxis: [
            {type: 'value', gridIndex: 0, name: 'Life Expectancy'},
            {type: 'value', gridIndex: 1, name: 'Income'},
            {type: 'value', gridIndex: 2, name: 'Population'},
            {type: 'value', gridIndex: 3, name: 'Population'}
        ],
        dataset: {
            dimensions: [
                'Income',
                'Life Expectancy',
                'Population',
                'Country',
                {name: 'Year', type: 'ordinal'}
            ],
            source: data
        },
        series: [
            {
                type: 'scatter3D',
                symbolSize: 3,
                encode: {
                    x: 'Population',
                    y: 'Life Expectancy',
                    z: 'Income',
                    tooltip: [0, 1, 2, 3, 4]
                }
            },
            {
                type: 'scatter',
                symbolSize: symbolSize,
                xAxisIndex: 0,
                yAxisIndex: 0,
                encode: {
                    x: 'Income',
                    y: 'Life Expectancy',
                    tooltip: [0, 1, 2, 3, 4]
                }
            },
            {
                type: 'scatter',
                symbolSize: symbolSize,
                xAxisIndex: 1,
                yAxisIndex: 1,
                encode: {
                    x: 'Country',
                    y: 'Income',
                    tooltip: [0, 1, 2, 3, 4]
                }
            },
            {
                type: 'scatter',
                symbolSize: symbolSize,
                xAxisIndex: 2,
                yAxisIndex: 2,
                encode: {
                    x: 'Income',
                    y: 'Population',
                    tooltip: [0, 1, 2, 3, 4]
                }
            },
            {
                type: 'scatter',
                symbolSize: symbolSize,
                xAxisIndex: 3,
                yAxisIndex: 3,
                encode: {
                    x: 'Life Expectancy',
                    y: 'Population',
                    tooltip: [0, 1, 2, 3, 4]
                }
            }
        ]
    };
    myChart.setOption(option);
});
目录
相关文章
|
6月前
|
前端开发
【前端图表】echarts散点图鼠标划过散点显示信息
【前端图表】echarts散点图鼠标划过散点显示信息
58 0
|
7月前
195Echarts - 自定义系列(Error Scatter on Catesian)
195Echarts - 自定义系列(Error Scatter on Catesian)
11 0
|
7月前
245Echarts - 3D 散点图(Scatter3D - Simplex Noise)
245Echarts - 3D 散点图(Scatter3D - Simplex Noise)
22 0
|
7月前
242Echarts - 3D 散点图(3D Scatter with Dataset)
242Echarts - 3D 散点图(3D Scatter with Dataset)
25 0
|
7月前
241Echarts - 3D 散点图(Scatter3D)
241Echarts - 3D 散点图(Scatter3D)
42 0
|
7月前
211Echarts - 数据区域缩放(Error Scatter on Catesian)
211Echarts - 数据区域缩放(Error Scatter on Catesian)
12 0
|
7月前
158Echarts - 平行坐标系(Scatter Matrix)
158Echarts - 平行坐标系(Scatter Matrix)
13 0
|
3月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
55 0
|
2天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
14 0
|
5天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
22 0