### Providing an Example Link in Doc Source: https://github.com/apache/echarts-doc/blob/master/README.md Create direct links to ECharts examples using the `${galleryEditorPath}` variable. This allows users to view and edit examples. ```markdown [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1) [aria pie](${galleryEditorPath}doc-example/aria-pie&edit=1&reset=1) ``` -------------------------------- ### Start Development Server Source: https://github.com/apache/echarts-doc/blob/master/README.md Run this command to start a static server for local development. It will watch for changes in the doc site source and markdown files, rebuilding as needed. ```shell npm run dev ``` -------------------------------- ### Install ECharts using npm Source: https://github.com/apache/echarts-doc/blob/master/en/tutorial/getting-started.md Instructions on how to install the ECharts library using the Node Package Manager (npm). This command adds ECharts as a dependency to your project, allowing you to use it in your web applications. ```bash npm install echarts --save ``` -------------------------------- ### Environment Map Configuration Examples Source: https://github.com/apache/echarts-doc/blob/master/zh/option-gl/partial/environment.md Demonstrates configuring the environment map with an image URL, a solid color, or a linear gradient. The gradient example shows a sky-to-ground effect. ```typescript // 配置为全景贴图 environment: 'asset/starfield.jpg' // 配置为纯黑色的背景 environment: '#000' // 配置为垂直渐变的背景 environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00aaff' // 天空颜色 }, { offset: 0.7, color: '#998866' // 地面颜色 }, { offset: 1, color: '#998866' // 地面颜色 }], false) ``` -------------------------------- ### Complete ECharts example with custom tooltip, draggable points, and responsive graphics (HTML/JavaScript) Source: https://github.com/apache/echarts-doc/blob/master/en/tutorial/drag-example.md This comprehensive HTML example demonstrates an ECharts line chart with several advanced features. It includes custom tooltip behavior triggered by graphic elements, draggable data points that update the chart in real-time, and responsive graphic element positioning on window resize. The setup covers ECharts initialization, data definition, chart options, and event handlers for interaction. ```html
``` -------------------------------- ### Initialize ECharts and draw a basic bar chart in HTML Source: https://github.com/apache/echarts-doc/blob/master/en/tutorial/getting-started.md Provides a complete HTML document demonstrating how to initialize an ECharts instance on a prepared DOM element and configure a simple bar chart. It defines chart title, tooltip, legend, axes, and series data, then renders the chart using the setOption method. ```html ECharts
``` -------------------------------- ### Toolbox Configuration Example Source: https://github.com/apache/echarts-doc/blob/master/en/option/component/toolbox.md Basic configuration for the toolbox component, showing its visibility and background color. ```javascript option = { toolbox: { show: true, backgroundColor: 'transparent' } }; ``` -------------------------------- ### Create Scatter Chart with ECharts Source: https://github.com/apache/echarts-doc/blob/master/asset-src/basic-concepts-overview/make-img.html Initializes a simple scatter plot chart using ECharts with custom color configuration and data points. Demonstrates basic scatter chart setup with coordinate system axes and direct data array specification. ```JavaScript var dom0 = document.getElementById('coord-sys0'); var chart0 = echarts.init(dom0, 'vintage'); var option = { color: ['blue'], backgroundColor: '#fff', xAxis: {}, yAxis: {}, series: { type: 'scatter', data: [ [13, 44], [51, 51], [51, 32], [67, 19], [19, 33] ] } }; chart0.setOption(option); ``` -------------------------------- ### Pictorial Bar Chart Example Source: https://github.com/apache/echarts-doc/blob/master/en/option/series/pictorialBar.md A basic example demonstrating the usage of a pictorial bar chart. ```javascript option = { series: [{ type: 'pictorialBar', // ... other options }] }; ``` -------------------------------- ### Matrix dimension structure example Source: https://github.com/apache/echarts-doc/blob/master/zh/option/partial/matrix-body-corner.md Example matrix configuration with x and y dimensions containing hierarchical headers. Used to illustrate cell positioning rules and coordinate system. ```javascript matrix: { x: [{ value: 'Xa0', children: ['Xb0', 'Xb1'] }, 'Xa1'], y: [{ value: 'Ya0', children: ['Yb0', 'Yb1'] }], } ``` -------------------------------- ### Embedding ECharts Example in Doc Source: https://github.com/apache/echarts-doc/blob/master/README.md Embed ECharts examples directly into documentation using an iframe. Use the `${galleryViewPath}` variable for the example URL. Avoid overuse to maintain performance. ```markdown ~[700X300](${galleryViewPath}pie-legend&edit=1&reset=1) ~[700x300](${galleryViewPath}doc-example/aria-pie&edit=1&reset=1) ``` -------------------------------- ### Gauge Detail Formatter Example Source: https://github.com/apache/echarts-doc/blob/master/en/option/series/gauge.md Example of using a formatter function to customize the display of the detail value in a gauge chart. ```javascript formatter: function (value) { return value.toFixed(0); } ``` -------------------------------- ### Graphic Element Configuration Example Source: https://github.com/apache/echarts-doc/blob/master/zh/option/component/graphic.md Configuration for rectangle and text elements including positioning and visual styles. ```javascript type: 'rect', left: 'center', // 相对父元素居中 top: 'middle', // 相对父元素居中 shape: { width: 190, height: 90 }, style: { fill: '#fff', stroke: '#999', lineWidth: 2, shadowBlur: 8, shadowOffsetX: 3, shadowOffsetY: 3, shadowColor: 'rgba(0,0,0,0.3)' } }, { type: 'text', left: 'center', // 相对父元素居中 top: 'middle', // 相对父元素居中 style: { fill: '#777', text: [ 'This is text', '这是一段文字', 'Print some text' ].join('\n'), font: '14px Microsoft YaHei' } } ] } ``` -------------------------------- ### Configure Multiple Grids and Subplots with Dataset Source: https://github.com/apache/echarts-doc/blob/master/asset-src/basic-concepts-overview/make-img.html This example shows how to define multiple grid components within a single chart instance to create subplots. It utilizes the dataset property for centralized data management and assigns series to specific grids using gridIndex and axisIndex. ```javascript var dom0 = document.getElementById('coord-sys2'); var chart0 = echarts.init(dom0, 'vintage'); var option = { dataset: { source: [ ['Jan', 25, 54, 24], ['Feb', 22, 64, 14], ['Mar', 62, 43, 39], ['Apr', 45, 74, 50], ['May', 34, 94, 25], ['Jun', 43, 64, 23], ['Jul', 33, 44, 23], ['Aug', 23, 30, 13], ['Sep', 43, 21, 20], ['Oct', 33, 28, 24], ['Nov', 39, 34, 33], ['Dec', 45, 44, 39] ] }, grid: [ { top: 40, bottom: '58%', borderColor: '#ccc', borderWidth: 1, show: true }, { top: '58%', bottom: 40, borderColor: '#ccc', borderWidth: 1, show: true } ], xAxis: [ { type: 'category', splitLine: {show: false}, gridIndex: 0 }, { type: 'category', splitLine: {show: false}, gridIndex: 1 } ], yAxis: [ { splitLine: {show: false}, gridIndex: 0 }, { splitLine: {show: false}, gridIndex: 1 } ], series: [ { type: 'line', xAxisIndex: 0, yAxisIndex: 0 }, { type: 'line', xAxisIndex: 1, yAxisIndex: 1 }, { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 } ] }; chart0.setOption(option); ``` -------------------------------- ### Web Audio API Setup and Initialization Source: https://github.com/apache/echarts-doc/blob/master/slides/custom/asset/ec-demo/audio.html Loads an MP3 file, decodes it using Web Audio API, creates analyzer and gain nodes, and initiates the visualization loop. Must be called after user interaction for audio playback. ```JavaScript var UPDATE_DURATION = 100; window.AudioContext = window.AudioContext || window.webkitAudioContext; var audioContext = new AudioContext(); var oReq = new XMLHttpRequest(); oReq.open('GET', '../data/music.mp3', true); oReq.responseType = 'arraybuffer'; oReq.onload = function(e) { audioContext.decodeAudioData(oReq.response, initVisualizer); }; oReq.send(); ``` -------------------------------- ### Configure Calendar Day Label First Day of Week in ECharts Source: https://github.com/apache/echarts-doc/blob/master/en/option/component/calendar.md Example of setting the `firstDay` property for the `dayLabel` in the ECharts calendar component, allowing the week to start on a day other than Sunday (e.g., Monday). ```ts calendar: [{ dayLabel: { firstDay: 1 // start on Monday } }] ``` -------------------------------- ### Prepare HTML DOM container for ECharts chart Source: https://github.com/apache/echarts-doc/blob/master/en/tutorial/getting-started.md Shows how to create a
element in the HTML body with specified width and height. This
serves as the canvas where ECharts will render the chart, and it must be present before initializing an ECharts instance. ```html
``` -------------------------------- ### Include ECharts JavaScript library in HTML Source: https://github.com/apache/echarts-doc/blob/master/en/tutorial/getting-started.md Demonstrates how to include the ECharts library in an HTML document using a ``` -------------------------------- ### Initialize Audio Visualizer with Analyzer Node Source: https://github.com/apache/echarts-doc/blob/master/slides/custom/asset/ec-demo/audio.html Creates audio source, analyzer, and gain nodes; configures FFT size; and sets up the frequency data extraction loop. Called after audio buffer is decoded. ```JavaScript function initVisualizer(audioBuffer) { inited = true; var source = audioContext.createBufferSource(); source.buffer = audioBuffer; // Must invoked right after click event if (source.noteOn) { source.noteOn(0); } else { source.start(0); } var analyzer = audioContext.createAnalyser(); var gainNode = audioContext.createGain(); analyzer.fftSize = 4096; gainNode.gain.value = 1; source.connect(gainNode); gainNode.connect(analyzer); analyzer.connect(audioContext.destination); var frequencyBinCount = analyzer.frequencyBinCount; var dataArray = new Uint8Array(frequencyBinCount); var beta = 0; ``` -------------------------------- ### setOption Usage Examples Source: https://github.com/apache/echarts-doc/blob/master/en/api/echarts-instance.md Demonstrates the practical application of `setOption` with different parameter combinations for updating chart configurations. ```typescript chart.setOption(option, notMerge, lazyUpdate); ``` ```typescript chart.setOption(option, { notMerge: ..., lazyUpdate: ..., silent: ... }); ``` ```typescript chart.setOption(option, { replaceMerge: ['xAxis', 'yAxis', 'series'] }); ``` -------------------------------- ### Basic Calendar Heatmap Configuration Source: https://github.com/apache/echarts-doc/blob/master/zh/option/component/calendar.md A complete example demonstrating how to generate virtual data and set up a calendar coordinate system with a heatmap series. ```javascript function getVirtualData(year) { year = year || '2017'; var date = +new Date(year + '/01/01'); var end = +new Date((+year + 1) + '/01/01'); var dayTime = 3600 * 24 * 1000; var data = []; for (var time = date; time < end; time += dayTime) { data.push([ time, Math.floor(Math.random() * 10000) ]); } return data; } const option = { tooltip: {}, visualMap: { min: 0, max: 10000, type: 'piecewise', orient: 'horizontal', left: 'center', top: 65, textStyle: { color: '#000' } }, calendar: { top: 120, left: 30, right: 30, cellSize: ['auto', 13], range: '2016', itemStyle: { borderWidth: 0.5 }, yearLabel: {show: false} }, series: { type: 'heatmap', coordinateSystem: 'calendar', data: getVirtualData(2016) } }; ``` -------------------------------- ### Configure ECharts Animation Update Delay with TypeScript Source: https://github.com/apache/echarts-doc/blob/master/en/option/partial/animation.md This property defines a delay before an animation update starts. It supports a number or a function, enabling different delay effects for various data points. The example shows how to introduce a staggered delay for later data, making them appear after an increasing interval. ```ts animationDelayUpdate: function (idx) { // delay for later data is larger return idx * 100; } ``` -------------------------------- ### Media Query Layout Examples Source: https://github.com/apache/echarts-doc/blob/master/zh/tutorial/media-query.md Demonstrates responsive legend and series positioning based on aspect ratio and container width. Includes vertical layout for narrow containers and horizontal layout for wider ones. ```javascript media: [ ..., { query: { maxAspectRatio: 1 // 当长宽比小于1时。 }, option: { legend: { // legend 放在底部中间。 right: 'center', bottom: 0, orient: 'horizontal' // legend 横向布局。 }, series: [ // 两个饼图左右布局。 { radius: [20, '50%'], center: ['50%', '30%'] }, { radius: [30, '50%'], center: ['50%', '70%'] } ] } }, { query: { maxWidth: 500 // 当容器宽度小于 500 时。 }, option: { legend: { right: 10, // legend 放置在右侧中间。 top: '15%', orient: 'vertical' // 纵向布局。 }, series: [ // 两个饼图上下布局。 { radius: [20, '50%'], center: ['50%', '30%'] }, { radius: [30, '50%'], center: ['50%', '75%'] } ] } }, ... ] ``` -------------------------------- ### Build documentation using md2reveal Source: https://github.com/apache/echarts-doc/blob/master/slides/ani/README.md This command uses the md2reveal tool to process 'main.md' in watch mode, typically for generating documentation. ```bash md2reveal -w main.md ``` -------------------------------- ### Embedded Example Declaration: UI Controls Source: https://github.com/apache/echarts-doc/blob/master/README.md Declares various UI controls for embedded ECharts examples. These controls allow interactive modification of example parameters. ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` -------------------------------- ### Marking Feature Introduction Version Source: https://github.com/apache/echarts-doc/blob/master/README.md Use this syntax to indicate the version in which a new feature was introduced. The system will use the specified version or the current version if it's greater. ```template {{ use: partial-version(version = "6.0.0") }} ``` -------------------------------- ### Configure visualMap with colorLightness mapping Source: https://github.com/apache/echarts-doc/blob/master/en/tutorial/visual-map.md Example demonstrating how to use colorLightness to adjust the lightness of original colors based on data values, combined with symbolSize mapping. ```javascript option = { visualMap: [ { ..., inRange: { // visual configuration items in selected range colorLightness: [0.2, 1], // map to lightness, which will process lightness based on original color // original color may be selected from global color palette, // which is not concerned by visualMap component symbolSize: [30, 100] }, ... }, ... ] }; ``` -------------------------------- ### Template Syntax: Use Predefined Block Source: https://github.com/apache/echarts-doc/blob/master/README.md Demonstrates how to include a predefined text block using the 'use' syntax. Allows passing variables to the included block. ```template {{ use: a_predefined_block_name_1 }} ``` ```template {{ use: a_predefined_block_name_2( varA = ${myVarX}, varB = 123, varC = 'some string', prefix: ${prefix} + '##' ) }} ``` -------------------------------- ### Custom labelLayout Implementation Examples Source: https://github.com/apache/echarts-doc/blob/master/zh/option/partial/label-layout.md Demonstrates how to use the labelLayout callback to position labels relative to graphic elements or adjust font size dynamically. ```ts labelLayout(params) { return { x: params.rect.x + 10, y: params.rect.y + params.rect.height / 2, verticalAlign: 'middle', align: 'left' } } ``` ```ts labelLayout(params) { return { fontSize: Math.max(params.rect.width / 10, 5) }; } ``` -------------------------------- ### Get SVG Local Coordinates from ECharts Click Event (TypeScript) Source: https://github.com/apache/echarts-doc/blob/master/en/tutorial/geo-svg.md This TypeScript example shows how to interactively obtain SVG local coordinates from an ECharts instance. It sets up a click event listener on the chart's ZRender instance. When a click occurs, it converts the screen pixel coordinates (`offsetX`, `offsetY`) to the corresponding SVG local coordinates using `myChart.convertFromPixel`, which can then be used for placing series data. ```typescript myChart.setOption({ geo: { map: 'some_svg' } }); myChart.getZr().on('click', function (params) { var pixelPoint = [params.offsetX, params.offsetY]; var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint); // When click, the data in SVG local coords will be printed, // which can be used in `series.data`. console.log(dataPoint); }); ``` -------------------------------- ### markPoint data array configuration Source: https://github.com/apache/echarts-doc/blob/master/zh/option/partial/mark-point.md Example showing multiple ways to specify markPoint positions: by type (max/min), by data coordinates, by screen coordinates with percentage, and by absolute pixel coordinates. ```typescript data: [ { name: '最大值', type: 'max' }, { name: '某个坐标', coord: [10, 20] }, { name: '固定 x 像素位置', yAxis: 10, x: '90%' }, { name: '某个屏幕坐标', x: 100, y: 100 } ] ``` -------------------------------- ### Tooltip Extra CSS Example Source: https://github.com/apache/echarts-doc/blob/master/en/option/partial/tooltip-common.md Apply custom CSS styles to the tooltip's floating layer. This example adds a shadow effect. ```ts extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' ``` -------------------------------- ### Configure Media Query with Base Option and Responsive Rules Source: https://github.com/apache/echarts-doc/blob/master/en/tutorial/media-query.md Sets up a complete Media Query configuration with baseOption and multiple media rules. Each media rule contains a query condition (minWidth, maxHeight, minAspectRatio) and corresponding option to apply when the condition is satisfied. The baseOption is always used as the foundation, and matching media options are merged on top using mergeOption(). ```javascript option = { // here defines baseOption title: {...}, legend: {...}, series: [{...}, {...}, ...], ..., media: [ // each rule of media query is defined here { query: {...}, // write rule here option: { // write options accordingly legend: {...}, ... } }, { query: {...}, // the second rule option: { // the second option legend: {...}, ... } }, { // default with no rules, option: { // when all rules fail, use this option legend: {...}, ... } } ] }; ``` -------------------------------- ### Basic Candlestick Chart Example Source: https://github.com/apache/echarts-doc/blob/master/en/option/series/candlestick.md A basic example demonstrating the usage of the candlestick series type. This is a visual representation and does not include direct code. ```json { "series": [ { "type": "candlestick", "data": [ [20, 34, 10, 38, 5], [40, 35, 30, 50, 4], [31, 38, 33, 44, 3], [38, 15, 5, 42, 3], [24, 34, 20, 35, 3], [35, 38, 21, 34, 2], [38, 20, 25, 30, 1], [28, 18, 10, 25, 1], [32, 20, 15, 35, 1], [20, 30, 25, 35, 1] ] } ] } ``` -------------------------------- ### Configure piecewise visualMap with dimension and inRange/outOfRange mapping Source: https://github.com/apache/echarts-doc/blob/master/en/tutorial/visual-map.md Example showing how to map a specific data dimension to visual elements (color and symbolSize) with separate configurations for in-range and out-of-range values. ```javascript option = { visualMap: [ { type: 'piecewise', min: 0, max: 5000, dimension: 3, // the fourth dimension of series.data, or value[3], is mapped seriesIndex: 4, // map with the fourth series inRange: { // visual configuration items in selected range color: ['blue', '#121122', 'red'], // defines color list of mapping // The largest value will be mapped to 'red', // and others will be interpolated symbolSize: [30, 100] // the smallest value will be mapped to size of 30, // the largest to 100, // and others will be interpolated }, outOfRange: { // visual configuration items out of selected range symbolSize: [30, 100] } }, ... ] }; ``` -------------------------------- ### Setting Start Value for Series Shapes Source: https://github.com/apache/echarts-doc/blob/master/en/option/component/axis-common.md Define the start value for series shapes like bar and pictorialBar. Note: Not currently supported with 'stack'. ```typescript { startValue: 50 } ``` -------------------------------- ### Max Surface Angle for Guide Line Source: https://github.com/apache/echarts-doc/blob/master/en/option/series/pie.md Sets the maximum angle between the guide line and the surface normal to prevent overlapping. Available since ECharts 5.0.0. ```javascript maxSurfaceAngle: number ``` -------------------------------- ### Initialize Chart and Set Base Option Source: https://github.com/apache/echarts-doc/blob/master/slides/ani/asset/ec-demo/transform-timeline.html Create the ECharts instance and apply the complete configuration with base options and timeline data structure. ```JavaScript option = { baseOption: { animation: animation, timeline: { axisType: 'category', orient: 'vertical', autoPlay: true, inverse: true, playInterval: 1000, left: null, right: 10, top: 30, bottom: 20, width: 55, height: null, label: { normal: { textStyle: { color: '#ddd' } }, emphasis: { textStyle: { color: '#fff' } } }, symbol: 'none', lineStyle: { color: '#555' }, checkpointStyle: { color: '#bbb', borderColor: '#777', borderWidth: 2 }, controlStyle: { showNextBtn: false, showPrevBtn: false, normal: { color: '#666', borderColor: '#666' }, emphasis: { color: '#aaa', borderColor: '#aaa' } }, data: [] }, backgroundColor: '#333', title: { 'text': rawData.timeline[0], textAlign: 'center', right: 50, bottom: 60, textStyle: { fontSize: 60, color: 'rgba(255, 255, 255, 0.9)' } }, tooltip: { padding: 5, backgroundColor: '#222', borderColor: '#777', borderWidth: 1 }, xAxis: { type: 'log', name: '人均收入', max: 100000, min: 300, nameGap: 25, nameLocation: 'middle', nameTextStyle: { fontSize: 16 }, splitLine: { show: false }, axisTick: { lineStyle: { color: '#ddd' } }, axisLine: { lineStyle: { color: '#ddd' } }, axisLabel: { formatter: '{value} $', textStyle: { color: '#ddd' } } }, yAxis: { type: 'value', name: '平均寿命', nameGap: 25, nameLocation: 'start', max: 100, nameTextStyle: { color: '#ccc', fontSize: 16 }, axisLine: { lineStyle: { color: '#ddd' } }, axisTick: { lineStyle: { color: '#ddd' } }, splitLine: { show: false }, axisLabel: { formatter: '{value} 岁', textStyle: { color: '#ddd' } } }, grid: { top: 30, left: 60, right: 110 }, visualMap: [ { show: false, type: 'piecewise', dimension: 3, categories: rawData.countries.map(function (item) { return item[2]; }), left: 10, bottom: 35, calculable: true, precision: 0.1, textGap: 10, itemGap: 12, textStyle: { color: '#ccc' }, inRange: { color: ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a', '#376956', '#c3bed4', '#495a80', '#9966cc', '#bdb76a', '#eee8ab', '#a35015', '#04dd98', '#d9b3e6'] }, outOfRange: { color: '#555' } } ], series: [ { type: 'scatter', id: 'gridScatter', itemStyle: itemStyle, data: rawData.series[0], symbolSize: function(val) { return sizeFunction(val[2]); }, tooltip: { formatter: function (obj) { var value = obj.value; return schema[3].text + '：' + value[3] + '
' + schema[1].text + '：' + value[1] + schema[1].unit + '
' + schema[0].text + '：' + value[0] + schema[0].unit + '
' + schema[2].text + '：' + value[2] + '
'; } } }, { type: 'scatter', id: 'geoScatter', coordinateSystem: 'geo', itemStyle: { normal: { opacity: 1, shadowBlur: 5, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, data: rawData.countries.map(function (item) { return [item[0], item[1], 0, item[2]]; }), symbolSize: 15, tooltip: { formatter: function (obj) { var value = obj.value; return schema[3].text + '：' + value[3]; } } } ], animationDurationUpdate: 1000, animationEasingUpdate: 'quinticInOut' }, options: [] }; ``` -------------------------------- ### AxisPointer Formatter Function Example (TypeScript) Source: https://github.com/apache/echarts-doc/blob/master/zh/option/partial/axisPointer-common.md An example of a formatter function for `axisPointer` that returns a custom string, demonstrating how to use `echarts.format.formatTime` with `params.value` when the axis type is 'time'. ```ts formatter: function (params) { // 假设此轴的 type 为 'time'。 return 'some text' + echarts.format.formatTime(params.value); } ``` -------------------------------- ### Documenting Feature Availability Source: https://github.com/apache/echarts-doc/blob/master/README.md Use this to specify the feature and the version it became available. This helps users understand when a particular capability was added. ```template {{ use: partial-version( feature = '`dataIndex` is available', version = '5.3.0' ) }} ``` -------------------------------- ### Mapbox3D Component Setup Source: https://github.com/apache/echarts-doc/blob/master/en/option-gl/component/mapbox3D.md Initialize and configure the Mapbox3D component with required SDK imports, token setup, and basic configuration. This is the prerequisite step before using any mapbox3D features in ECharts. ```APIDOC ## Mapbox3D Component Setup ### Description Initialize the Mapbox3D component by importing the Mapbox GL JS SDK, setting the access token, and configuring basic map options. ### Prerequisites Include the Mapbox GL JS library and stylesheet in your HTML: ```html ``` ### Configuration Steps 1. Set your Mapbox access token: ```ts mapboxgl.accessToken = 'your token'; ``` 2. Configure the mapbox3D component in chart options: ```ts chart.setOption({ mapbox: { style: 'mapbox://styles/mapbox/dark-v9' } }); ``` ### Reference For detailed Mapbox GL JS API documentation, visit: https://www.mapbox.com/mapbox-gl-js/api/ ``` -------------------------------- ### Step Line Chart Options Source: https://github.com/apache/echarts-doc/blob/master/en/option/series/line.md Illustrates the different ways to configure a step line chart using the 'step' property. This allows for visualizing data in a stair-step fashion. ```json { "series": [ { "type": "line", "step": "start", "data": [ 820, 932, 901, 934, 1290, 1330, 1320 ] } ] } ``` ```json { "series": [ { "type": "line", "step": "middle", "data": [ 820, 932, 901, 934, 1290, 1330, 1320 ] } ] } ``` ```json { "series": [ { "type": "line", "step": "end", "data": [ 820, 932, 901, 934, 1290, 1330, 1320 ] } ] } ``` -------------------------------- ### Custom Series Event Listener Example Source: https://github.com/apache/echarts-doc/blob/master/en/option/series/custom.md This example shows how to attach an event listener to a custom series. It defines a 'click' event handler that is triggered when an element with a specific name ('aaa') is clicked. Custom information ('info') can be attached to graphic elements and accessed within the event handler. ```javascript chart.setOption({ // ... series: { type: 'custom', renderItem: function () { // ... return { type: 'group', children: [{ type: 'circle' // ... }, { type: 'circle', name: 'aaa', // User specified info, available // in event handler. info: 12345, // ... }] }; } } }); chart.on('click', {element: 'aaa'}, function (params) { // When the element with name 'aaa' clicked, // this method called. console.log(params.info); }); ``` -------------------------------- ### Initialize ECharts Instance and Render Chart Source: https://github.com/apache/echarts-doc/blob/master/slides/ani/asset/ec-demo/transform-timeline.html Create the ECharts instance on the target DOM element and apply the complete configuration option. ```JavaScript var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option); ``` -------------------------------- ### Example Matrix Header Definition for Coordinate System (JavaScript) Source: https://github.com/apache/echarts-doc/blob/master/en/option/partial/matrix-body-corner.md Provides an example of how `matrix.x` and `matrix.y` dimensions (headers) are defined. This structure is fundamental for understanding the coordinate system used to locate cells within the matrix body and corner sections. ```js matrix: { x: [{ value: 'Xa0', children: ['Xb0', 'Xb1'] }, 'Xa1'], y: [{ value: 'Ya0', children: ['Yb0', 'Yb1'] }] } ``` -------------------------------- ### Label Line Points Array Format - TypeScript Source: https://github.com/apache/echarts-doc/blob/master/en/option/partial/label-layout.md Defines the array structure for labelLinePoints, containing three coordinate pairs representing the label guide line path. Primarily used in pie and funnel charts for fine-tuning calculated guide lines. ```typescript [[x, y], [x, y], [x, y]] ``` -------------------------------- ### Initialize Reveal.js with Plugin Dependencies Source: https://github.com/apache/echarts-doc/blob/master/slides/custom/asset/md2reveal-0.1.7/plugin/markdown/example.html Configures the Reveal.js engine with UI controls and loads external scripts for Markdown support, syntax highlighting, and speaker notes. ```javascript Reveal.initialize({ controls: true, progress: true, history: true, center: true, dependencies: [ { src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: '../notes/notes.js' } ] }); ``` -------------------------------- ### Get ECharts Container Height Source: https://github.com/apache/echarts-doc/blob/master/en/option/series/custom.md Returns the current height of the ECharts container. ```javascript api.getHeight() ``` -------------------------------- ### Get ECharts Container Width Source: https://github.com/apache/echarts-doc/blob/master/en/option/series/custom.md Returns the current width of the ECharts container. ```javascript api.getWidth() ``` -------------------------------- ### Configure visualMap with seriesTargets Source: https://github.com/apache/echarts-doc/blob/master/en/option/component/visual-map.md Demonstrates how to use `seriesTargets` to apply visual mapping to different dimensions of multiple series simultaneously, especially useful with datasets. ```javascript option = { dataset: { source: [ ['product', 'sales', 'price', 'year'], ['A', 100, 20, 2020], ['B', 200, 30, 2021], ['C', 150, 25, 2022] ] }, visualMap: { type: 'continuous', min: 0, max: 100, // Configure different series to use different dimensions seriesTargets: [ { seriesIndex: 0, dimension: 1 // First series uses 'sales' dimension }, { seriesIndex: 1, dimension: 2 // Second series uses 'price' dimension } ], inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] } }, series: [ { type: 'bar' }, { type: 'line' } ] }; ```