vue+elementUI中使用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结束

一天天啥也不是 散会