echarts map migration and map drill-down 1. Migration 1. Introduce Chinese map data and echarts const china = require(“./echarts-mapJson-master/china.json”) import * as echarts from ‘echarts’ 2. Data preparation //Point data If you need to hover or click to obtain data, you can add additional parameters. // For example, { value: [118.8062, 31.9208], code:’440100′, itemStyle: { […]
Tag: echarts
04-Echarts simplified series: Cartesian coordinate system xAxis and yAxis
For the X-axis and Y-axis in the graph, there are at most two x-axes in a grid. More than two axes need to be configured through the offset property. 1. xAxis and yAxis attribute configuration of coordinate system option={ xAxis:[ { id:’1′, //Component ID show:true, //Whether to display the x/y axis gridIndex:0, //The index of […]
echarts draws a scatter plot. Mark the x week and y week at the specified position.
Article directory echarts draws a scatter plot. Mark the x week and y week at the specified position. Example 1 Example 2 Example three echarts draws a scatter plot, mark the x week and y week at the specified position Example 1 let scatterData = {<!– –> data: [ [ [-0.2, -0.6], [0.4, 0.3], [0.1, […]
Using ECharts in uni-app – Configuring four different charts
Blogger: The kitten is here ?The core of the article: Using ECharts in uni-app – Configuring four different charts Article directory Preface Install ECharts plug-in Introducing the ECharts library Create Charts instance and chart container Configure and render charts Configure histogram Configure line chart Configure pie chart Configure scatter plot Destroy chart instance Foreword Integrating […]
echarts force guide diagram_relationship diagram_knowledge diagram
Echarts commonly used various chart template configurations Note: This is mainly based on various charts and uses more various configuration items of Echarts; The following codes can be copied to the Echarts official website and previewed directly; Icon template directory Echarts commonly used various chart template configurations 1. Force guide chart 2. Donut chart 3. […]
echarts pie chart center add image
Requirements Problem – temporarily unsolvable (this problem does not exist if the chart is centered) Since the position of the pie chart here is not at the center of the current echarts chart container, but a little to the left, we need to set: The center image is located to the left [See – Main […]
EChartsNanny level from blank project to Echarts map
Premise Please create a blank vue project first and prepare a blank vue file for writing Echarts map After preparing a blank vue page, just follow me step by step to achieve the effect I finally showed! ! ! Resource download ECharts npm install echarts Map json file Offline map download, after downloading, copy the […]
03-Echarts simplified series: grid gird
Introduction to grid: One of the components used to define the chart drawing area. It is used to determine the position, size and scale of each graphic in the coordinate system area of the Echarts container, so that multiple grids can be defined in each chart. Each grid The grid is used for an independent […]
Echarts-3D histogram
Achieve true 3D histogram through Echarts’ echarts.graphic.extendShape The idea is to determine the width of the histogram by adjusting the top surface (CubeTop), left surface (CubeLeft), and right surface (CubeRight). It is recommended to adjust the top surface first. Generally, c1 does not need to be moved. // echarts-3D-bar-config.js import Vue from “vue”; const echarts […]
The overlapping and stacking of echarts’ histogram realizes the display of two bars and the previous difference display.
renderings Main idea Prepare three cylinders (original plan, actual progress, difference) The original plan and actual progress are set to overlap {<!– –> barWidth: 20, // yAxisIndex: 1, z: 1, name: ‘original plan’, type: ‘bar’, stack: ‘ab’, emphasis: {<!– –> // Click on the cylinder and the color of other cylinders will become lighter. disabled: […]