vue-cli 引入echarts

最新推荐文章于 2023-03-25 16:10:20 发布

吃不胖的茶叶蛋

最新推荐文章于 2023-03-25 16:10:20 发布

阅读量701

点赞数

本文链接：https://blog.csdn.net/twx843571091/article/details/88888744

版权

1、安装依赖 cnpm install echarts -S

全局引入

在main.js中

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

局部引入

在用到的vue文件中

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require("echarts/lib/chart/line")
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  data () {
    return {
        
    }
  },//end data()

  mounted(){
    this.getDbData();
    // this.drawLine();
  },

  methods: {
    resizeCharts (echartsDom,chartBox) {
      echartsDom.style.width = window.innerWidth+'px';
      echartsDom.style.height = (window.innerHeight-100)+'px';
    },
    getDbData(){
      const $this =this;

      this.$http.get('/warn/api/dashbord')
        .then(res => {
          $this.drawLine(res.data);
        })
        .catch(err => {

        })
    },
    drawLine(dbData){
      let chartBox = document.getElementsByClassName('charts')[0]
      let echartsDom = document.getElementById('echarts')

      this.resizeCharts(echartsDom,chartBox);
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(echartsDom); //若是全局引入，这里使用this.$echarts.init(echartsDom)
      // 绘制图表
      myChart.setOption({
          title: {
             left: 'left',
             text: '监控预警统计'
            },
          tooltip: {},
          xAxis: {
              data: dbData.data.Doing.date
          },
          yAxis: {},
          series: [{
              name: '预警提示',
              type: 'line',
              data: dbData.data.Doing.value
          },{
            name: '预警待办',
            type: 'line',
            data: dbData.data.Reading.value
          }]
      });
    }
  }//end methods
};
</script>