vue 中，echarts的使用，简单入门
首先创建一个页面组件，创建三个div，分别来使用折线图，柱状图，扇形图
//折线图
//柱状图
//扇形图
在setup中使用
import {getLineData,getBarData,getFanData} from '@/tool/echarts'
export default {
name: "Home",
components: { },
setup(){
const {proxy} = getCurrentInstance()
// 关于echarts 表格的渲染
function getEcharts(){
// 折线图
getLineData(proxy.$refs['echartLine'])
// 柱状图
getBarData(proxy.$refs['echartBar'])
// 扇形图
getFanData(proxy.$refs['echartFan'])
}
// 进入组件之后的回调
onMounted(() => {
getEcharts()
})
}
测试的echarts.js ；这里的数据都是伪造的，主要是来看看该怎么使用这些数据
import * as echarts from 'echarts';
import {reactive} from 'vue';
// 模拟数据的产生
// 折现图的数据*************************************************
let data = []
for(let i = 0; i < 7;i++){
let paoject = {
Book: Math.floor(Math.random() * 5000),
Commodity: Math.floor(Math.random() * 5000),
Blog: Math.floor(Math.random() * 5000),
ShuiSanYa: Math.floor(Math.random() * 5000),
}
data.push(paoject)
}
const porjectDataAPI = {
xData:['2016','2017','2018','2019','2020','2021','2022'],
data:data
}
// 柱状图的数据*************************************************
let data1 = []
for(let i = 0; i < 7;i++){
let user = {
active: Math.floor(Math.random() * 1000),
inertia: Math.floor(Math.random() * 1000),
}
data1.push(user)
}
const userDataAPI = {
xData:['星期一','星期二','星期三','星期四','星期五','星期六','星期天'],
data: data1
}
// 扇形图的数据*************************************************
let data2 = []
let xData = ['Book','Commodity','Blog','ShuiSanYa']
for(let i = 0; i < 4;i++){
let project = {
name: xData[i],
value: Math.floor(Math.random() * 100),
}
data2.push(project)
}
let project1DataAPI = reactive({
data:data2
})
// 关于echarts *************************************************
let xOptions = reactive({
//图例颜色
textStyle:{
color:"#333"
},
grid:{
left: "20%"
},
//提示框
tooltip:{
trigger:"axis",
},
xAxis:{
type:"category",
data:[],
axisLine:{
lineStyle:{
color:"#17b3a3"
}
},
axisLabel:{
interVal:0,
color:"#333"
},
},
yAxis:[
{
type:"value",
axisLine:{
lineStyle:{
color:"#17b3a3"
}
}
}
],
color:["#ef5b9c","#1d953f","#694d9f","#ffd400"],
series:[]
});
let pieOptions = reactive({
tooltip:{
trigger:"item",
},
color:[
"#ef5b9c","#1d953f","#694d9f","#ffd400"
],
series:[]
})
//折现图的渲染*************************************************
let porjectData = reactive({
xData:[],
series:[]
})
export const getLineData = (dom) => {
porjectData.xData = porjectDataAPI.xData
const keyArray = Object.keys(porjectDataAPI.data[0])
const series = []
keyArray.forEach((key) => {
series.push({
name:key,
data:porjectDataAPI.data.map(item=>item[key]),
type:'line'
})
})
porjectData.series = series;
xOptions.xAxis.data = porjectData.xData
xOptions.series = porjectData.series
// 进行渲染
let Echarts = echarts.init(dom)
Echarts.setOption(xOptions)
}
// 柱状图的渲染*************************************************
let userData = reactive({
xData:[],
series:[]
})
export const getBarData = (dom) => {
userData.xData = userDataAPI.xData
userData.series = [
{
name:"不活跃用户",
data:userDataAPI.data.map((item) => item.inertia),
type:"bar"
},
{
name:"活跃用户",
data:userDataAPI.data.map((item) => item.active),
type:"bar"
}
]
xOptions.xAxis.data = userData.xData
xOptions.series = userData.series
// 进行渲染
let Echarts = echarts.init(dom)
Echarts.setOption(xOptions)
}
// 扇形图的渲染*************************************************
let project1Data = reactive({
series:[]
})
export const getFanData = (dom) => {
project1Data.series = [
{
data:project1DataAPI.data,
type:'pie'
}
]
pieOptions.series = project1Data.series
let Echarts = echarts.init(dom)
Echarts.setOption(pieOptions)
}
Original: https://www.cnblogs.com/shuisanya/p/16630336.html
Author: 水三丫
Title: vue 中，echarts的使用，简单入门
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/581454/
转载文章受原作者版权保护。转载请注明原作者出处！