可视化图表插件Apache ECharts基础使用
图表资源网站：Examples - Apache ECharts
中文文档地址：在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts
1、下载模块：
cnpm install echarts --save
cnpm install echarts-liquidfill --save
2、封装组件导入模块使用：因为要获取Dom元素，所以要在nextTick函数或者挂载后函数里写操作：echart.vue
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { getCurrentInstance, onMounted, reactive } from 'vue';
// 基于准备好的dom，初始化echarts实例
let that = getCurrentInstance()
//接收父元素的option数据
let props = defineProps({
option: {
type: Object,
default: {}
},
height: {
type: Number,
default: 180
},
})
//option就是表格的数据参数和样式，不同的option，表格不同
let option = props.option
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(that.refs.echart);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
})
html：
` `
3、option对象的其中一种表格的参数和样式：
let option6 = reactive({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
color: ["#248ff7", '#64cd84'],
legend: {
data: ['系统外部', '系统内部'],
left: 'center',
color: "#fff",
itemWidth: 15,
itemHeight: 10,
},
grid: {
left: '0',
top: '30',
right: '10',
bottom: '0',
containLabel: true
},
xAxis: [{
type: 'category',
// boundaryGap: false,
data: ['1', '2', '3', '4', '5'],
axisLine: {
lineStyle: {
• color: 'rgba(255,255,255,0.12)'
}
},
axisLabel: {
// margin: 10,
color: '#e2e9ff',
fontSize: 14
},
}],
yAxis: [{
splitNumber: 3,
axisLabel: {
formatter: '{value}',
color: '#e2e9ff',
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
• color: 'rgba(255,255,255,0.12)',
• type: 'dotted'
}
}
}],
series: [
{
name: '系统外部',
type: 'bar',
stack: '排名',
data: [120, 132, 101, 134, 90],
barWidth: 15
},
{
name: '系统内部',
type: 'bar',
stack: '排名',
data: [220, 182, 191, 234, 290],
barWidth: 15,
itemStyle: {
• borderRadius: [30, 30, 0, 0],
}
},
]
})
4、父组件引入表格组件，传参：
import * as echarts from 'echarts';
import echart from "../../components/echarts.vue"
html:
//option6在上面定义了
``
