在vue中使用的Echarts的步骤

Posted colinliu666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在vue中使用的Echarts的步骤相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于在vue中使用的Echarts的步骤的主要内容,如果未能解决你的问题,请参考以下文章

28-Vue之ECharts-折线图

Vue中echarts的基本用法

29-Vue之ECharts-散点图

26-Vue之ECharts-柱状图

在vue中使用Echarts

在vue中使用Echarts