Background: Participating in an interactive chart project, the customer had a need for polar coordinate comparison to display different types of indicator data in different directions and distances. Specifically, the attribute fields are: Source, distance, orientation, ID, rotation angle, size Let’s look at the renderings first: Technical points: Legend description: The distance is the radial […]
Tag: echart
org.hibernate.QueryException: could not instantiate class [com.ak47.cms.cms.dto.TechArticleDto] from
Table of Contents org.hibernate.QueryException: could not instantiate class [com.ak47.cms.cms.dto.TechArticleDto] from tuple Abnormal background solution in conclusion org.hibernate.QueryException: could not instantiate class [com.ak47.cms.cms.dto.TechArticleDto] from tuple When performing Hibernate-based data query, you may encounter an exception similar to ??org.hibernate.QueryException: could not instantiate class??, especially when using DTO (Data Transfer Object) from When mapping data in query results. […]
vue3 + ts + echarts 3d pie chart
<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() […]
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; ③ […]
echart implements map exploration and displays scatter plots
Introduction: Realize provincial level (Henan as an example) exploration and display scattered points while the data remains unchanged. Completed picture: 1. Prepare map geoJSON, DataV.GeoAtlas geographic gadget series Create a tool function: introduce all the files in the directory, pass in the place name and return the geoJson of the place (dynamic references are used […]
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; […]