echarts图表使用详解
echarts 图表
html文件 中使用 echarts 图表步骤
Vue项目中使用echarts图表
echarts 图表
echarts 图表的使用
html 中使用 echarts 图表步骤
- CDN 引入 echarts
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js"></script>
- 创建图表容器，设置宽高
<div id="main" style="width:50%;height:50%"></div>
- 初始化 echarts 图表
const myecharts = echarts.init(document.getElementById('main')) // 初始化dom为echarts图表
- 将图表挂在 vue 实例上
this.echarts = myecharts
- 监听视口改变 重新计算图表大小
let _this = this
window.onresize = function () {
// 监听视口改变
_this.echarts.resize() // 视口改变 重新计算图表大小
}
- 定义图表配置项
const option = {......}
- echarts 图表使用配置项
myecharts.setOption(option) // 图表使用配置项
【注意】在将 echarts 挂载到 Vue 实例上之后，立即监听视口变化，计算图标大小
Vue 项目中使用 echarts 图表步骤
- 安装 ecahrts
npm install echarts
- 导入 echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
- 使用 echarts
使用步骤与在 html 中相同
实战演练
html 中使用 echarts 图表
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="app" style="width:100vw;height:100vh">
<div id="main" style="width:50%;height:50%"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
echarts: null,
},
mounted() {
this.drawEcharts()
},
methods: {
drawEcharts() {
const dom = document.getElementById('main') // 获取容器dom
const myecharts = echarts.init(dom) // 初始化dom为echarts图表
const option = {
title: {
text: 'Basic Radar Chart',
},
legend: {
data: ['Allocated Budget', 'Actual Spending'],
},
radar: {
// shape: 'circle',
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 },
],
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Allocated Budget',
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Actual Spending',
},
],
},
],
}
this.echarts = myecharts // 将图表挂在vue实例上
let _this = this
window.onresize = function () {
// 监听视口改变
_this.echarts.resize() // 视口改变 重新计算图表大小
}
myecharts.setOption(option) // 图表使用配置项
},
},
})
</script>
</body>
</html>
Vue 项目中使用 echarts 图表
效果图：
<div style="width: 40%; height: 50%" id="bar"></div>
<div style="width: 40%; height: 50%" id="line"></div>
<div style="width: 40%; height: 50%" id="pie"></div>
<div style="width: 40%; height: 50%" id="radar"></div>
export default {
data() {
return {
myBar: null,
myline: null,
mypie: null,
myradar: null,
};
},
methods: {
drawBar() {
console.log("加载图表bar");
const myBar = this.$echarts.init(document.getElementById("bar")); //初始化图表
let option = {
//配置项
title: {
text: "bar",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
myBar.setOption(option); //使用配置项
this.myBar = myBar; // 将echarts图表 赋值给vue实例的属性
},
drawLine() {
const myline = this.$echarts.init(document.getElementById("line")); //实例化图表
let option = {
title: {
text: "line",
},
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line",
},
],
};
myline.setOption(option); //使用配置项
this.myline = myline;
},
drawPie() {
const mypie = this.$echarts.init(document.getElementById("pie")); //实例化图表
let option = {
title: {
text: "pie",
},
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: ["30%", "80%"],
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" },
],
},
],
};
mypie.setOption(option); //使用配置项
this.mypie = mypie;
},
drawRadar() {
const myradar = this.$echarts.init(document.getElementById("radar")); //实例化图表
let option = {
title: {
text: "Radar",
},
legend: {
data: ["Allocated Budget", "Actual Spending"],
},
radar: {
// shape: 'circle',
indicator: [
{ name: "Sales", max: 6500 },
{ name: "Administration", max: 16000 },
{ name: "Information Technology", max: 30000 },
{ name: "Customer Support", max: 38000 },
{ name: "Development", max: 52000 },
{ name: "Marketing", max: 25000 },
],
},
series: [
{
name: "Budget vs spending",
type: "radar",
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: "Allocated Budget",
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: "Actual Spending",
},
],
},
],
};
myradar.setOption(option); //使用配置项
this.myradar = myradar;
},
},
mounted() {
this.drawBar();
this.drawLine();
this.drawPie();
this.drawRadar();
let vm = this;
window.onresize = function () {// BOM事件,当视口大小改变的时候触发
vm.myBar && vm.myBar.resize(); // 当视口改变时，重新计算图表的大小
vm.myline && vm.myline.resize();
vm.mypie && vm.mypie.resize();
vm.myradar && vm.myradar.resize();
};
},
};
</script>
浙公网安备 33010602011771号