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;
option = {
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 38, name: 'rose 2' },
{ value: 32, name: 'rose 3' },
{ value: 30, name: 'rose 4' },
{ value: 28, name: 'rose 5' },
{ value: 26, name: 'rose 6' },
{ value: 22, name: 'rose 7' },
{ value: 18, name: 'rose 8' }
]
}
]
};
option & amp; & amp; myChart.setOption(option);
2. Tutorials shared by netizens
1. http://?https://www.dandelioncloud.cn/article/details/1580424652969463810?
2. https://blog.csdn.net/weixin_44763569/article/details/118681932
(This tutorial uses push to put external values into an array)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Introduce echarts.js -->
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="//i2.wp.com/cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Prepare a Dom with size (width and height) for ECharts -->
<div id="main" style="width: 600px;height:600px;"></div>
<script type="text/javascript">
var names = []; //Category array (used to store pie chart categories)
var brower = [];
$.ajax({
url: "test.json",
data: {},
type: 'GET',
success: function(data) {
//Execute the content of this function when the request is successful, and the result is the json object returned by the server.
$.each(data, function(index, item) {
names.push(item.value); //Remove categories one by one and fill in the category array
brower.push({
name: item.jobName,
value: item.jobNum
});
});
hrFun(brower);
},
});
// Based on the prepared dom, initialize the echarts instance
var myChart = echarts.init(document.getElementById('main'));
function hrFun(param) {
myChart.setOption({
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
legend: {
orientation: 'vertical',
x: 'right',
y: 'bottom',
textStyle: { //Style of legend text
color: '#0b2b5e',
fontSize: 12
},
data: ['online', 'offline']
},
series: [{
name: 'Area Mode',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
label: {
normal: {
show: false,
},
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
borderRadius: 8
},
data: brower,
}]
});
}
</script>
</body>
</html>
[{
"jobNum": 1,
"jobName": "Equipment Manager"
}, {
"jobNum": 1,
"jobName": "Electrical Operation"
}, {
"jobNum": 0,
"jobName": "ERP Management"
}, {
"jobNum": 1,
"jobName": "Security Manager"
}, {
"jobNum": 1,
"jobName": "Production Manager"
}, {
"jobNum": 1,
"jobName": "FKM Workshop Director"
}, {
"jobNum": 5,
"jobName": "Operator"
}, {
"jobNum": 1,
"jobName": "Unloader"
}, {
"jobNum": 2,
"jobName": "Manager"
}, {
"jobNum": 5,
"jobName": "Finished Product Inspection"
}, {
"jobNum": 2,
"jobName": "Electrical Management"
}, {
"jobNum": 0,
"jobName": "Warehouse"
}, {
"jobNum": 5,
"jobName": "Director"
}, {
"jobNum": 1,
"jobName": "Vice President of Equipment"
}, {
"jobNum": 0,
"jobName": "Default identity"
}, {
"jobNum": 2,
"jobName": "Device Management"
}, {
"jobNum": 1,
"jobName": "Statistics"
}, {
"jobNum": 1,
"jobName": "Team Leader"
}, {
"jobNum": 3,
"jobName": "Instrument"
}, {
"jobNum": 1,
"jobName": "Public"
}, {
"jobNum": 6,
"jobName": "Forklift"
}, {
"jobNum": 1,
"jobName": "Administrative Management"
}, {
"jobNum": 2,
"jobName": "General worker"
}, {
"jobNum": 1,
"jobName": "Monitor"
}, {
"jobNum": 2,
"jobName": "Human Resources"
}, {
"jobNum": 1,
"jobName": "Sales"
}, {
"jobNum": 1,
"jobName": "Aggregation Technician"
}, {
"jobNum": 1,
"jobName": "Craft"
}, {
"jobNum": 4,
"jobName": "Analysis"
}, {
"jobNum": 1,
"jobName": "Accountant"
}, {
"jobNum": 5,
"jobName": "Cleaning"
}, {
"jobNum": 1,
"jobName": "Vice President of Technology"
}, {
"jobNum": 2,
"jobName": "Security Administrator"
}, {
"jobNum": 1,
"jobName": "Maintenance Management"
}, {
"jobNum": 2,
"jobName": "Purchasing"
}, {
"jobNum": 2,
"jobName": "Sales Backstage"
}, {
"jobNum": 5,
"jobName": "Shift Leader"
}, {
"jobNum": 12,
"jobName": "Post-processing"
}, {
"jobNum": 1,
"jobName": "Analysis Workshop Director"
}, {
"jobNum": 1,
"jobName": "FEP Workshop Director"
}, {
"jobNum": 2,
"jobName": "Process Management"
}, {
"jobNum": 4,
"jobName": "Electrician"
}, {
"jobNum": 0,
"jobName": "Measurement"
}, {
"jobNum": 18,
"jobName": "Aggregation"
}, {
"jobNum": 1,
"jobName": "Warehouse Management"
}, {
"jobNum": 1,
"jobName": "Logistics Management"
}, {
"jobNum": 1,
"jobName": "General Manager"
}, {
"jobNum": 1,
"jobName": "Public Works Director"
}, {
"jobNum": 1,
"jobName": "Safety Director"
}, {
"jobNum": 6,
"jobName": "Central Control Analysis"
}, {
"jobNum": 1,
"jobName": "Finished Product Inspection Team Leader"
}, {
"jobNum": 2,
"jobName": "Deputy Director"
}, {
"jobNum": 1,
"jobName": "Single Technician"
}, {
"jobNum": 1,
"jobName": "Cashier"
}, {
"jobNum": 1,
"jobName": "Technician"
}, {
"jobNum": 2,
"jobName": "Environmental Protection Manager"
}, {
"jobNum": 2,
"jobName": "Mechanical Repair"
}, {
"jobNum": 2,
"jobName": "Vice President of Production"
}, {
"jobNum": 6,
"jobName": "External Operation"
}, {
"jobNum": 1,
"jobName": "Assistant General Manager"
}, {
"jobNum": 1,
"jobName": "Measurement, ERP management"
}]
3. Course video tutorial
https://www.bilibili.com/video/BV14u411D7qK?p=50 & amp;vd_source=841fee104972680a6cac4dbdbf144b50
(Receive data by setting echarts and axios)
Mainly involves the following 5 files:
1. three.json, one of the background data files, pay attention to the order of value and name!
{
"chartData":[
{"value":1000,"name":"A card"},
{"value":2000,"name":"B Brand"},
{"value":3000,"name":"C brand"},
{"value":2500,"name":"D card"},
{"value":1500,"name":"E card"}
]
}
2. three.js, one of the background configuration files
let express=require("express")
let router=express.Router()
let threeData=require("../mock/three.json")
router.get("/data",(req,res)=>{
res.send({msg:"I am the routing address of three",chartData:threeData})
})
module.exports=router;
3. index.js, one of the background routing configuration files
let express=require("express")
let app=express();
//Set cross-domain
app.use(function(req,res,next){
res.header('Access-Control-Allow-Origin','*');
res.header('Access-Control-Allow-Headers','Content-Type,Content-Length, Authorization, Accept,X-Requested-with , yourHeaderFeild');
res.header('Access-Control-Allow-Methods','PUT,POST,GET, DELETE,OPTIONS');
next();
})
//Reference routing file
let chartOne=require("./router/one")
let chartTwo=require("./router/two")
let chartThree=require("./router/three")
let chartFour=require("./router/four")
//Use middleware to configure routing
app.use("/one",chartOne)
app.use("/two",chartTwo)
app.use("/three",chartThree)
app.use("/four",chartFour)
app.listen(8888)
4. homePage.vue, front-end file, reference component
//The following only excerpts the script code, others are omitted
<script>
//reference component
import ItemPage from "@/components/itemPage.vue"
import ItemOne from "@/components/itemOne.vue"
import ItemTwo from "@/components/itemTwo.vue"
import ItemThree from "@/components/itemThree.vue"
import ItemFour from "@/components/itemFour.vue"
import MapPage from "@/components/mapPage.vue"
//reference inject
import {inject} from "vue"
export default{
components:{
ItemPage,ItemOne,ItemTwo,ItemThree,ItemFour,MapPage
},
setup(){
//Test using echarts
let $echarts=inject("echarts")
//Test using axios
let $http=inject("axios")
console.log($echarts)
console.log($http)
}
}
</script>
5. itemThree.vue, front-end component file, obtains back-end data
<template>
<div>
<h2>Chart 3</h2>
<div class="chart" id="threeChart">
Analysis chart
</div>
</div>
</template>
<script>
import{inject,onMounted,reactive} from "vue"
export default {
setup(){
//1. Set echarts, set axios, and create variables that accept requests.
let $echarts=inject("echarts")
let $http=inject("axios")
//2. Get data
async function getState(){
data=await $http({url:"/three/data"});
}
let data=reactive({})
//Generate dynamic chart
//1. Dynamically display the chart after the dom is loaded.
onMounted(()=>{
//2. Send request
getState().then(()=>{
console.log("pie chart",data.data)
//Initialize echarts
let myChart=$echarts.init(document.getElementById("threeChart"))
myChart.setOption({
legend:{
//Set legend
top:"bottom"//put it at the bottom
},
series:[
{
type:"pie",//pie chart
radius:[10,100],//inner radius, outer radius
center:["50%","45%"],//The center coordinates of the pie chart (horizontal, vertical)
roseType:"area",//Set to rose diagram
itemStyle:{
borderRadius:10//Inner and outer corner radius
},
data:data.data.chartData.chartData
}
]
})
})
return{
getState,data
}
})
}
}
</script>
<style>
h2{
/*48 pixels*/
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart{
/*high*/
height: 4.5rem;
background-color:rgba(191, 255, 0, 0.3);
}
</style>