关于调用echarts
import echarts from 'echarts'
// 折线图
function initLineCharts () {
}
// 柱形图
function initBarCharts (ele, xData, yData) {
// ele是dom地址的ID值 xData是x轴数据 yData是y轴数据
const myCharts = echarts.init(document.querySelector(ele))
const option = {
title: {},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {},
grid: {
containLabel: true
},
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: [
{
data: yData,
type: 'bar',
itemStyle: {
// 自定义柱形的颜色
color: '#81D3F8'
}
}
]
}
myCharts.setOption(option)
}
// 仪表图
function initMeterCharts (ele, name, value) {
const myCharts = echarts.init(document.querySelector(ele))
const option = {
title: {
// text: '出勤率'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
series: [
{
data: [
{ name, value }
],
splitNumber: 4,
type: 'gauge',
radius: '90%',
title: {
offsetCenter: [0, '70%']
},
detail: {
formatter: (value) => { return `${value}%` }
}
}
]
}
myCharts.setOption(option)
}
export default {
initLineCharts, initBarCharts, initMeterCharts
}
// 调用方法
import charts from 'charts'