vue+elementUI中使用Echarts (懒人无脑版)
vue脚手架模板项目 使用echarts史上最明白版 一看就会
·
vue+elementUI中使用Echarts (懒人无脑版)+(史上最强版)
前言
一、Echarts
1.提供一个Echarts 网站 随去随用 http://img.9cfcf.com/#tp-line
二、使用步骤
傻瓜shi操作
1.创建一个vue模板
记得main.js 中全局引用
// 引入ECharts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
模板懒得上了 麻烦 你也知道的
。。。。
2.上模板 (就这么省事)
代码如下():
template>
<div id="echart1"></div> //放他的盒子 id 很重要
</template>
<script>
export default {
name: "",
data(){
return
},
mounted() {
this.echarts();
},
methods: {
echarts(){
var chartDom = document.getElementById('echart1');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
option && myChart.setOption(option);
},
}
}
</script>
<style scoped>
//样式自己写去
#echart1 {
height: 350px;
width: 800px;
margin: 0 auto;
}
</style>
3结束
一天天啥也不是 散会
更多推荐
已为社区贡献1条内容
所有评论(0)