Vue Typescripts项目中使用echarts
阅读数:200 评论数:0
跳转到新版页面分类
html/css/js
正文
1、安装依赖
npm install echarts --save
npm install --save @types/echarts
前者是工程依赖,后者是声明依赖。
2、引用
可以全局引入,也可以在需要引用echarts的组件中引入echarts。
<script lang="ts">
……
import echarts from 'echarts';
……
</script>
3、设置option选项,将图表渲染在dom里。
// HTML部分
<div ref="chart"></div>
// Script部分
option = {
xAxis: {
// 类型断言告诉TypeScript想推断的字面量
type: ('category' as 'category'),
axisLine: {
lineStyle: {
type: ('dashed' as 'dashed'),
},
},
},
}
const Chart = echarts.init(this.$refs.chart as HTMLCanvasElement);
// @ts-ignore 跳过ts的类型检查
Chart.setOption(this.option);
相关推荐
一、引入方式
1、直接在组件中引用
<script setup>
import * as echarts from 'echarts'
</script>
2、全局引入,一般在Ap
1、安装依赖
npm install svg-sprite-loader --save-dev
2、配置build文件夹中的webpack.base.conf.js
3、在src/component
在列表渲染时使用key属性
当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略,如果数据项的顺序被改变,Vue将不会移动D
echarts
是百度公司前端开发一个图表库,支持柱状图、饼状图、k线图、map图、热导向图、折线图。
主要采用canvas画图。完全免费。
hi
一、vue.js devtools开发工具的使用
1、安装
在chrome或firefox浏览器的扩展插件仓库里搜索vue devtool。
2、debugger的使用
假设我们想调试App.vue这
ref被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,引用指向的就是DOM元素,如果用在子组件上,引用就指向组件实例。
<!-- `vm.$