在vue中使用的Echarts的步骤

Posted 2021-02-11 colinliu666

1、首先在项目中安装Echarts　

npm install echarts -g --save    //安装

2、在项目中引入Echarts（在main.js中引入）

import echarts from ‘echarts‘  //引入Echarts，

Vue.prototype.$echarts = echarts  //定义为全局变量

3、使用并绘制简单表格（承载画布的div必须要定义大小width、height）

<template>
  <!--
  ref="myechart"定义该div也就是画布的名字，在this.$echarts.init(this.$refs.myechart) 图表初始化的时候使用
  this.$refs.myechart 也可以替换为 document.getElementById(‘main‘) 或者 document.getElementByClassName(‘echart-box‘)
  -->
    <div class="HelloWorld echart-box" ref="myechart" id="main"></div> 
</template>
<script>

  export default {
    name:‘HelloWorld‘,
    data(){
      return{
        // 定义图表，各种参数
        option:{  
          backgroundColor:"lightblue",
          title:{
            backgroundColor:"lightyellow",
            show:true,
            text:"测试练习",
            textStyle:{
              fontSize:25,
              fontWeight:900,
              color:‘red‘,
            },
            subtext:‘测试小标题‘,
            subtextStyle:{
              color:‘green‘,
              fontSize:20,
              fontWeight:600
            }
          },
          xAxis:{
            type:"category",
            data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日",]
          },
          yAxis:{
            type:"value",
          },
          series:[
            {
              data:[50,54,82,97,150,240,68],
              type:"line"
            },
            {
              data:[20,58,34,108,250,150,300],
              type:"line"
            }
          ]
        }
      }
    },
    mounted:function(){
      console.log(this.$echarts)
      let myechart = this.$echarts.init(this.$refs.myechart) //初始化一个echarts
      myechart.setOption(this.option)  //setOption 用this.option中的数据开始作图

    }
   
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.HelloWorld{   //注意画布必须定义大小
  width: 1000px;
  height:600px;
  background: #cce6f0;
  margin: 0 auto;
}
</style>