jeecg-boot之echarts Demo
1、在项目下terminal安装依赖 npm install echarts -S2、在WebStorm src/main.js中全局引入import echarts from 'echarts'Vue.prototype.$echarts = echarts3、编写代码,在mounted函数中调用echart的实例<template><...
·
1、在项目下terminal安装依赖 npm install echarts -S
2、在WebStorm src/main.js中全局引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3、编写代码,在mounted函数中调用echart的实例
<template> <div id="myChart" :style="{width:'600px',height:'300px'}"></div> </template> <script> export default { name: 'Echartdemo', data(){ return{ msg: 'EChart demo' } }, mounted(){ this.drawLine() }, methods: { drawLine(){ let myChart = this.$echarts.init(document.getElementById('myChart')) myChart.setOption({ title: { text: 'xxx高铁商品销量统计' }, tooltip: {}, xAxis: { data: ["水果","酸奶","可乐","矿泉水","瓜子花生","扑克牌"] }, yAxis:{}, series:[{ name: '销售', type: 'bar', data: [105,40,16,100,210,80] }] }); } } } </script> <style scoped> </style>
更多推荐
已为社区贡献7条内容
所有评论(0)