| (window.webpackJsonp=window.webpackJsonp||[]).push([[21],{315:function(e,n,t){"use strict";t.r(n),n.default="# Basic Scatter Chart\n\nScatter Chart, a frequently used chart type, was constructed with several \"points\". These points sometimes represent the position of the value in the coordinate system (cartesian coordinate system, geo coordinate system, etc.), sometimes the size and color of items can be mapped to the value, represent high-dimensional data.\n\n## Simple Example\n\nThe following example is a basic scatter chart configuration with the x-axis as category and the y-axis as value:\n\n```js live\noption = {\n xAxis: {\n data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n },\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [220, 182, 191, 234, 290, 330, 310]\n }\n ]\n};\n```\n\n## Scatter Chart in Cartesian Coordinate System\n\nIn the previous case, the x-axis of the scatter chart is a discrete category axis and the y-axis is a continuous value axis. However, the normal scene for the scatter chart is to have 2 continuous value axis (also called the cartesian coordinate system). The series type is different in that both x-axis and y-axis value are included in `data`, but not in `xAxis` and `yAxis`.\n\n```js live\noption = {\n xAxis: {},\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [\n [10, 5],\n [0, 8],\n [6, 10],\n [2, 12],\n [8, 9]\n ]\n }\n ]\n};\n```\n\n## Customized Scatter Chart\n\n### Symbol Style\n\nSymbol refers to the item shape in a scatter chart. There are three types of config available. The first is ECharts built-in shape, the second is image, the last is the SVG path.\n\nThe built-in shape in ECharts included: `'circle'`, `'rect'`(rectangle), `'roundRect'`(rounded rectangle), `'triangle'`, `'diamond'`, `'pin'` and `'arrow'`. To use built-in shapes, you need to state the `symbol` to the corresponding string.\n\nIf you want to define the shape as any image, try to use `'image'` following by the path, eg. `'image://http://example.com/xxx.png'` or `'image://./xxx.png'`.\n\nECharts `symbol` also supports SVG vector graphics. You can define `symbol` as an SVG file path that starts with `'path://'` to locate the vector graphics. The advantages of vector graphics are smaller size and no jagged or blurred.\n\nMethod to find the SVG path: Open an `SVG` path; Find the path similar as `<path d=\"M… L…\"></path>`; Add `d`'s value after `'path://'`. Let's check how to define an item to vector shape of heart.\n\nFirstly, we need an `SVG` file of a heart. You can draw one by vector editing software, or download one from the internet. Here is the content:\n\n```xml\n<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51.997 51.997\" style=\"enable-background:new 0 0 51.997 51.997;\" xml:space=\"preserve\">\n <path d=\"M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z\"/>\n</svg>\n```\n\nIn ECharts, define config `symbol` as a path of d:\n\n```js live\noption = {\n xAxis: {\n data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n },\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [220, 182, 191, 234, 290, 330, 310],\n symbolSize: 20,\n symbol:\n 'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z'\n }\n ]\n};\n```\n\nIn this way, we have a heart vector of the item.\n\n### Symbol Size\n\nThe size of symbol is defined by [`series.symbolSize`](${optionPath}series-scatter.symbolSize). It can be s pixel value of the item size, or an array included two numbers, to define the width and height.\n\nBesides, it can be defined as a call back function. Here is an example of the format:\n\n```ts\n(value: Array | number, params: Object) => number | Array;\n```\n\nThe first argument is the data value, and the second argument included other arguments of the data item. In the following instance, we define the size of the item proportional related to the data value.\n\n```js live\noption = {\n xAxis: {\n data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n },\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [220, 182, 191, 234, 290, 330, 310],\n symbolSize: function(value) {\n return value / 10;\n }\n }\n ]\n};\n```\n"}}]); |