Vue2.0+elementUI使用echarts插件
2024-10-13 06:05:48
1、npm安装echarts：
$ npm install echarts -S
2、html代码：
<template>
<div id="chartColumn" style="width: 100%; height: 400px;">
</div>
</template>
3. js代码：
<script>
import echarts from 'echarts'
export default {
data(){
return {
chartColumn: null
}
},
mounted() {
this.drawLine();
},
methods: {
drawLine(){
this.chartColumn = echarts.init(document.getElementById('chartColumn')); this.chartColumn.setOption({
title: { text: 'Column Chart' },
tooltip: {},
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'
}]
});
}
}
}
</script>
4、效果图：
最新文章
- CentOS7使用firewalld打开关闭防火墙与端口(转载)
- 【译】使用 CocoaPods 模块化iOS应用
- ubuntu 安装 netbeans C++ IDE
- <s:select>下拉框是空白的解决办法
- UVa 107 - The Cat in the Hat （找规律,注意精度）
- 提高zxing生成二维码的容错率及zxing生成二维码的边框设置
- C++：String类
- MYSQL的全表扫描，主键索引(聚集索引、第一索引)，非主键索引(非聚集索引、第二索引)，覆盖索引四种不同查询的分析
- CSS权威指南-第三版--读书笔记
- python - StringIO文本缓冲
- java学习——平台的安装与部署
- python之hasattr()、 getattr() 、setattr() 函数
- 8Linux磁盘划分、RAID
- 如何在Windows 10上运行Docker和Kubernetes？
- 如何 通过 userAgent 区别微信小程序
- MySQL MHA 报错处理
- 使用MAVEN打JAR，直接使用
- 【Android】17.3 Activity与StartedService的绑定
- 基于 java 【Web安全】文件上传漏洞及目录遍历攻击
- 对于redis框架的理解（四）