<template> <div class=”water-eval-container”> <div class=”cityGreenLand-charts” id=”cityGreenLand-charts”></div> <!– Base background –> <div class=”bg”></div> </div> </template> <script lang=”ts”> import {<!– –> getCurrentInstance } from ‘vue’ import {<!– –> inject, onMounted, Ref, ref, markRaw, watch, computed, nextTick } from ‘vue’ import ‘echarts-gl’ export default {<!– –> name: ‘echartsCom’, setup() {<!– –> const {<!– –> proxy } = getCurrentInstance() […]
Tag: charts
Popular all over the Internet! You can use Pyecharts to create “migration charts” and “carousel charts”
1. Review of pyecharts knowledge points 1) Knowledge review We have already described how to use pyecharts to draw graphics, which involves the following four steps. Today we will follow the following steps to draw the migration chart and carousel chart. ① Select the chart type; ② Declare the graphics class and add data; ③ […]
Using echarts in Vue projects
Article directory Preface 1. What are echarts? 2. Usage steps 1. Import the library Get from npm other methods 2. Introduce ECharts into the project Import all Introduce on demand 2. Project practice Define parent container Summarize Foreword This article will introduce how to start from 0 in the Vue project and use echarts to […]
The most basic use of putting echarts into vue
<template> <div class=”echart” ref=”mychart” id=”mychart” :style=”{ float: ‘left’, width: ‘100%’, height: ‘400px’ }” ></div> </template> <script> import * as echarts from ‘echarts’; export default {<!– –> mounted() {<!– –> this.$nextTick(() => {<!– –> this.initEcharts(); }); }, methods: {<!– –> initEcharts() {<!– –> const chartDom = this.$refs.mychart; const myChart = echarts.init(chartDom); const option = {<!– –> […]
Section 4 Echarts Pie Chart 1
renderings 1. Pie chart statistics page div <div class=”left_top2″ onclick=”ak_left_click2.top1Click();”> <div class=”left2_bg”> <div class=”visual_title” style=”margin-bottom: 0px;height: 27px;”> <span class=”Top_title” style=”display: inline-block;position: relative;z-index: 10;width: 30%; margin-left: 12px; font-size: 14px; line-height: 35px; text-align: center; margin-top: -9px;white-space: nowrap;”>Contract price range (quantity)</span> <img src=”images/ksh33.png” style=”width: 100%;position: absolute;bottom: 0;left: 0;”> </div> <div class=”visual_box left2_top1″ style=”height: 90%;”> <div class=”window_echarts1″ id=”right_top2_left” style=”width: […]
Section 1 Echarts histogram
renderings 1. First introduce the left/right page into the three-dimensional index page <!–#include virtual=”panel/ak_czRight.html”–> <!–#include virtual=”panel/ak_left1.html”–> 2. After introducing the left/right pages, each row of statistics page is introduced into the left/right pages respectively <div class=”leftTop1″ id=”ak_left”> <!–#include virtual=”ak_left1Top1.html”–> <!–#include virtual=”ak_czRight2.html”–> <!–#include virtual=”ak_left1Top4.html”–> <!–#include virtual=”ak_left1Top5.html”–> </div> 3. Bar chart statistics page div <div class=”visual_box” style=”margin-top: […]
EchartsRose pie chart data interaction
In the process of learning the echarts rose pie chart, I learned three methods of data interaction. I would be happy if it is helpful to you. 1. Official website tutorial https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType-simple (The tutorial data is in the code) import * as echarts from ‘echarts’; var chartDom = document.getElementById(‘main’); var myChart = echarts.init(chartDom); var option; […]
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 […]