实例首页
自学教程
IT工具箱
源代码
下载代码
上下布局
点击运行 >
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ECharts 5 数据到图形的映射 实例</title> <script src="https://cdn.staticfile.org/jquery/3.7.1/jquery.min.js"></script> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 800px;height:600px;"></div> <script type="text/javascript"> var ROOT_PATH = 'https://demo.runoops.com'; // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var option; $(document).ready(function () { $.get( ROOT_PATH + '/data/life-expectancy-table.json', function (data) { var sizeValue = '57%'; var symbolSize = 2.5; option = { legend: {}, tooltip: {}, toolbox: { left: 'center', feature: { dataZoom: {} } }, grid: [ { right: sizeValue, bottom: sizeValue }, { left: sizeValue, bottom: sizeValue }, { right: sizeValue, top: sizeValue }, { left: sizeValue, 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: '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); } ); }); option && myChart.setOption(option); </script> </body> </html>
运行结果: