echarts的使用

终归墟

2024-06-30 帮助1人

echarts官网 Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/index.html

一、echarts的引入

1、cdn引入

https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.js

学新通

2、npm引入

npm install echarts

如果要使用3d类型的需要引入echarts-gl

npm install echarts-gl

下载完成后可以在package.json中查看

学新通

二、echarts的简单使用

1项目中的简单使用

（1）定义容器，并引入cdn

<head>
<meta charset="utf-8">
<title></title>
<style>
#echar {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="echar"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.js"></script>

（2）从官网查看自己所要使用的图表

学新通

（3）然后就可以在详情里看到详细的代码展示

学新通

（4）将代码复制，放到自己的js里就可以运行查看效果了

<div id="echar"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.js"></script>
<script>
var chartDom = document.getElementById('echar'); //获取容器
var myChart = echarts.init(chartDom); //初始化
var option; //数据
option = {
xAxis: { //x轴
type: 'category',
boundaryGap: false,
data: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15']
},
yAxis: {//y轴
type: 'value',
min:0,
max:5,
axisLabel:{
formatter:function(val){
var arr = []
if (val == 0) {
arr.push('无');
} else if (val <= 1) {
arr.push('低');
} else if (val <= 2) {
arr.push('中');
} else if (val <= 3) {
arr.push('高');
} else if (val <= 4) {
arr.push('困难');
} else {
arr.push('地狱');
}
return arr
}
}
},
series: [ //空间内的数据
{
data: [3, 2, 5, 1, 2, 4, 1,3, 2, 3, 1, 2, 4, 1,3, 2, 3, 1, 2, 4, 1,4,2], //数据的点
type: 'line' //线
}
]
};
myChart.setOption(option); //将数据绘制成图表展示

学新通

到这里就完成了简单的图表展示了

2、vue中的使用

（1）在main.js中引入

import Vue from 'vue'
import App from './App.vue'
//引入echarts
import * as echarts from 'echarts';
Vue.echarts = Vue.prototype.$echarts = echarts
//引入echarts-3d
import echartsGL from 'echarts-gl'
Vue.prototype.$echartsGL = echartsGL

（2）在vue文件中使用

.确定好容器的样式

<template>
<div>
<div id="echar"></div>
</div>
</template>
<script>。。。</script>
<style scoped>
#echar {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>

script

mounted() {
this.playlines()
},
methods: {
playlines() {
// 基于准备好的dom，初始化echarts实例
var chartDom = document.getElementById('echar');
var myChart = this.$echarts.init(chartDom);
//多图数据切换防止数据并集出现，使用myChart.clear()清除原有数据
myChart.clear()
//绘制
var option;
option = {
xAxis: {//x轴
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7','8','9']
},
yAxis: {//y轴
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260,220,140],//图表数据
type: 'line'//线
}]
};
myChart.setOption(option);
}
}

（3）运行项目即可看到效果

学新通

注：clear()方法可以清除容器！在做多个图切换的时候如果不清理容器会导致上个图表的数据残留，影响效果

三、结尾

echarts图表的熟练使用还是多写几个例子就熟悉了，关于不懂的方法可以在文档中查看，如果本文有不恰当或您不认同的地方，还请多多包涵，也欢迎您的指正！

学新通

这篇好文章是转载于：学新通技术网

echarts的使用

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

TikTok加速器哪个好免费的TK加速器推荐

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

微信运动停用后别人还能看到步数吗