echarts的简单使用
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.
·
一、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>
<!-- 引入cdn -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.js"></script>
(2)从官网查看自己所要使用的图表
(3)然后就可以在详情里看到详细的代码展示
(4)将代码复制,放到自己的js里就可以运行查看效果了
<!-- 显示图形的容器 -->
<div id="echar"></div>
<!-- 引入cdn -->
<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图表的熟练使用还是多写几个例子就熟悉了,关于不懂的方法可以在文档中查看,如果本文有不恰当或您不认同的地方,还请多多包涵,也欢迎您的指正!
更多推荐
已为社区贡献1条内容
所有评论(0)