Tag: echart

Front-end (html) uses Echarts to draw heat maps – json data format

1. Download the echarts.js file from the official website 1.1 Echart official website: Download – Apache ECharts 1.2 Drag the downloaded echarts.js file to the same directory as the html file 2. Use Python to implement data file format conversion (.xlsx-.json) 2.1 Reasons for converting data format PM2.5 monitoring data: 30 days a month, monitoring […]

echarts columnar stacking, multiple types, multiple columns, dynamic rendering

Record the development needs you encounter at work, hoping it will be helpful to others. Requirements: You need to select the year, month, and day based on a drop-down selection box, pass different parameters, dynamically render the data according to different values, and compare multiple types, compare the same year together, and exclude those that […]

The text at both ends of echarts dataZoom is not fully displayed. Set the label below the handle.

Problem: When the echarts dataZoom is as long as the chart, and when start=0 or end=100, the text at both ends is not fully displayed, as shown below Solution: You can put the text below and manually change the horizontal position when start90 <template> <div ref=”echartsBox” class=”echartsBox”></div> </template> <script lang=’ts’ setup> import * as echarts […]

echarts map migration and map drill-down

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: { […]

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 […]

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 […]