目录
5.创建js文件,实现echarts的使用,案例使用了script标签实现
6.在option中配置你想实现的图表样式,这里以折线图为例
5..在option中配置你想实现的图表样式,这里以折线图为例
一、ECharts的官方文档
二、ECharts的使用方法
1.下载echars.js
2.下载完成后
在文件夹中找到echarts.js文件,将该文件复制到你的项目文件当中
3.将该文件导入到你的项目当中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在此处引入了echarts.js -->
<script src="./echarts.js"></script>
</head>
<body>
</body>
</html>
4.创建一个承载echarts图表的盒,给出具体的宽高
<body>
<div id="root" style="width: 800;height: 600px;"></div>
</body>
5.创建js文件,实现echarts的使用,案例使用了script标签实现
<body>
<div id="root" style="width: 800;height: 600px;"></div>
<script>
//获取展示echarts的dom元素
var myChart = echarts.init(document.getElementById("root"));
//设置echarts的属性
var option = {
}
//设置echarts展示到对应的dom元素中
myChart.setOption(option)
</script>
</body>
6.在option中配置你想实现的图表样式,这里以折线图为例
<body>
<div id="root" style="width: 800;height: 600px;"></div>
<script>
//获取展示echarts的dom元素
var myChart = echarts.init(document.getElementById("root"));
//设置echarts的属性
var option = {
//图表的x轴
xAxis:{
type:"category",
data:["周一","周二","周三","周四","周五"],
},
//图表的y轴
yAxis: {
type:"value"
},
//图表的属性
series:[
{
type:"line",
data:[50,40,60,30,90]
}
]
}
//设置echarts展示到对应的dom元素中
myChart.setOption(option)
</script>
</body>
7.实现效果
这只是最基本的实现方式,它还有许许多多的样式设置,请参考其官方文档按需设置
二、在vue项目的使用方法
1.NPM安装命令
npm install echarts --save
2.创建图表位置
<template>
<h1>ECharts的使用</h1>
<div id="echarts" ref="dom" style="width: 800px;height: 600px;"></div>
</template>
3.引入echarts
import * as echarts from 'echarts'
4.echarts的实现框架
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
myCharts: {},
//配置属性
option: {
}
}
},
methods: {
setECharts() {
//获取dom元素
let dom = this.$refs.dom;
this.myCharts = echarts.init(dom);
//设置echarts展示到对应的dom元素中
this.myCharts.setOption(this.option)
}
},
mounted() {
//在页面初始换时,使echarts展示出来
this.setECharts();
}
}
</script>
5..在option中配置你想实现的图表样式,这里以折线图为例
option: {
xAxis: {
type: "category",
data: ["周一", "周二", "周三", "周四", "周五"],
},
yAxis: {
type: "value"
},
series: [
{
type: "line",
data: [50, 40, 60, 30, 90]
}
]
}