vue中Echarts的使用-自选效果
2024-08-31 20:55:21
由于项目要求使用数据图，于是我选择了我们的Echarts用来实现效果
一：全局安装Echarts
npm install echarts --save（这个安装的是最新的版本有时候回报init未定义）这个时候可以使用低版本npm install --save echarts@4.1.0我是用的4.1.0
二：在所需echarts的页面中引入Echarts
import echarts from "echarts";
三：按照这个步骤以此移入自己选择的Echarts配置
export default {
name: "",
data() {
return {};
},
mounted() {
this.drawLine(); // 调用绘图函数
},
methods: {
drawLine() {
// 初始化
let myCharts = echarts.init(this.$refs.myCharts);
// let myChart = echarts.init(document.getElementById('myChart'));
// 写配置
let option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
smooth: true,
},
],
};
// 使用配置生成报表
myCharts.setOption(option);
},
},
};
有时候会出现
可以尝试一下使用
一：
mounted() {
this.$nextTick(() => {
this.drawLine();
});
}
二：
mounted() {
setTimeout(() => {
this.drawLine(); // 调用绘图函数
}, 1000);
},
最新文章
- Entity Framework 6 Recipes 2nd Edition（10-9）译 -> 在多对多关系中为插入和删除使用存储过程
- C#语言和数据库基础
- 《linux内核设计与实现》读书笔记第十七章
- C#常用开源类库
- java 线程协作 join()
- 如何快速建立一个测试资源Web服务器及异步获取资源（Unity3D）
- hdu 1008 注意同层情况
- Object C学习笔记26-文件管理(二)
- C#判断奇偶数的函數
- hadoop Yarn 编程API
- MongoDB学习笔记03
- NYOJ--42--dfs--一笔画问题
- Ocelot中文文档-转换Headers
- [Swift]LeetCode437. 路径总和 III | Path Sum III
- 大家都知道fastclick能解决300ms延迟，现在我们来看一下，使用方法
- C#学习-图解教程(1)：格式化数字字符串
- yii2过滤器(filter)
- HOWTO: Avizo/Amira使用前的显卡设置(Volume Rendering，Volren不显示)
- leetcode98
- JavaWeb环境搭建（作业八）