echarts学习笔记(vue项目中使用)

Posted 2022-01-27 今夜月色很美

1、vue整合echarts

npm install echarts --save

创建components

<template>
    <div id="main" :style="width: '1400px', height: '400px'"></div>
</template>
<<script>
import * as echarts from 'echarts';
export default 
    name: 'BarDemo',
    watch: 
        data:
            handler(val, oldVal)
                this.init();
            ,
            deep:true //true 深度监听
        ,
    ,
    data () 
        return 
            data: [120, 200, 150, 80, 70, 110, 130],
            //x轴刻度
            xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        
    ,
    mounted() 
        this.init()
    ,
    methods: 
        init()
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            option = 
            //竖着的柱状图
            // xAxis: 
            //     type: 'category',
            //     data: this.xAxisData
            // ,
            // yAxis: 
            //     type: 'value'
            // ,
            //横着的柱状图
            yAxis: 
                type: 'category',
                data: this.xAxisData
            ,
            xAxis: 
                type: 'value'
            ,
            series: [
                
                data: this.data,
                type: 'bar'
                
            ]
            ;

            option && myChart.setOption(option);

        
    ,

</script>

注意这里要用mounted，使用created报错:Error: Initialize failed: invalid dom.

created这时候还只是创建了实例，但模板还没挂载完成

在index中添加

//导入组件
import EchartsDemo from '@/components/test/EchartsDemo'
//添加routes
	
      path: '/EchartsDemo',
      name: 'EchartsDemo',
      component: EchartsDemo
    

在其他页面使用router-link跳转即可

<router-link to="/EchartsDemo">echarts柱状图</router-link>

2、组件化封装echarts模板

2.1、定义饼图模板组件

模板组件提供props属性opt，当其他页面使用模板组件对opt绑定赋值时会被watch监听，执行optHandler后动态渲染图表，echarts的setOption方法使用了属性合并。

<template>
  <div ref="chart" :style=" width: '1400px', height: '400px' "></div>
</template>
<script>
import * as echarts from "echarts";
export default 
  name: "PieChart",
  props: 
    opt: 
      type: Object,
      default() 
        return ;
      
    ,
  ,
  watch: 
    opt: 
      deep: true,
      handler(opt) 
        this.optHandler(opt)
      
    ,
  ,
  data() 
    return 
      chart: null,
      option: 
        legend: 
          show: true
        ,
        series: [
          
            name: "Access From",
            type: "pie",
            itemStyle: 
              borderRadius: 5
            ,
            data: []
          
        ],
        tooltip: 
          trigger: "item"
        
      
    ;
  ,
  mounted() 
    this.init();
  ,
  methods: 
    init() 
      // 初始化
      this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption(this.option);
    ,
    optHandler(option) 
      if (Object.keys(option).length > 0) 
        this.chart.setOption(option)
      
    ,
  
;
</script>

由于echarts的setOption方法对option进行了属性合并，所以外部使用option进行赋值重新渲染时，只需要修改(或添加)option中对应的属性即可，需要注意的是，赋值使用的是option.series[0].data，在data()中声明时也需要声明到这一级别，否则模板组件中会监听不到数据变化，测试代码如下:

<template>
  <pie-chart :opt="option"></pie-chart>
</template>
<script>
import PieChart from "@/components/echarts/PieChart";
export default 
  name: "PieTest",
  components: 
    PieChart
  ,
  data() 
    return 
      option: 
        series: [
          
            data: []
          
        ]
      
    ;
  ,
  mounted() 
    this.init();
  ,
  methods: 
    init() 
      this.option.series[0].data = [
           value: 1048, name: "Search Engine" ,
           value: 735, name: "Direct" ,
           value: 580, name: "Email" ,
           value: 484, name: "Union Ads" ,
           value: 300, name: "Video Ads" 
        ];
    
  
;
</script>

2.2、定义柱状图模板组件

option也可以不在data()中定义

<template>
  <div ref="chart" :style=" width: '1400px', height: '400px' "></div>
</template>
<script>
import * as echarts from "echarts";
export default 
  name: "PieChart",
  props: 
    opt: 
      type: Object,
      default() 
        return ;
      
    
  ,
  watch: 
    opt: 
      deep: true,
      handler(opt) 
        this.optHandler(opt);
      
    
  ,
  data() 
    return 
      chart: null
    ;
  ,
  mounted() 
    this.init();
  ,
  methods: 
    init() 
      // 初始化
      this.chart = echarts.init(this.$refs.chart);
    ,
    optHandler(option) 
      if (Object.keys(option).length > 0) 
        this.chart.clear()
        this.chart.setOption(
        xAxis: 
          type: "category",
          data: option.yAxis.data
        ,
        yAxis: 
          type: "value"
        ,
        series: [
          
            data: option.series[0].data,
            type: "bar"
          
        ]
      );
      
    
  
;
</script>

测试代码:

<template>
  <bar-chart :opt="option"></bar-chart>
</template>
<script>
import BarChart from "@/components/echarts/BarChart";
export default 
  name: "BarTest",
  components: 
    BarChart
  ,
  data() 
    return 
      option: 
        yAxis: 
            data: []
        ,
        series: [
          
            data: []
          
        ]
      
    ;
  ,
  mounted() 
    this.init();
  ,
  methods: 
    init() 
      this.option.series[0].data = [120, 200, 150, 80, 70, 110, 130]
      this.option.yAxis.data =  ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    
  
;
</script>

2.3、定义折线图模板组件

侦听器也可以用this.$watch的方式定义

<template>
  <div ref="chart" :style=" width: '1400px', height: '400px' "></div>
</template>
<script>
import * as echarts from "echarts";
export default 
  name: "StackedLineChart",
  props: 
    opt: 
      type: Object,
      default() 
        return ;
      
    
  ,
  data() 
    return 
      chart: null
    ;
  ,
  mounted() 
    this.init();
  ,
  methods: 
    init() 
      // 初始化
      this.chart = echarts.init(this.$refs.chart);
      this.$watch("opt", option => this.optHandler(option), 
      immediate: true,
      deep: true
    )
    ,
    optHandler(option) 
      if (Object.keys(option).length > 0) 
        this.chart.clear();
        this.chart.setOption(
          title: 
            text: "Stacked Line"
          ,
          tooltip: 
            trigger: "axis"
          ,
          legend: 
            data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"]
          ,
          grid: 
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          ,
          toolbox: 
            feature: 
              saveAsImage: 
            
          ,
          xAxis: 
            type: "category",
            boundaryGap: false,
            data: option.xAxis.data
          ,
          yAxis: 
            type: "value"
          ,
          series: option.series
        );
      
    
  
;
</script>

测试代码：

<template>
  <stacked-line-chart :opt="option"></stacked-line-chart>
</template>
<script>
import StackedLineChart from "@/components/echarts/StackedLineChart";
export default 
  name: "StackedLineTest",
  components: 
    StackedLineChart
  ,
  data() 
    return 
      option: 
        xAxis: 
          data: []
        ,
        series: []
      
    ;
  ,
  mounted() 
    this.init();
  ,
  methods: 
    init() 
      this.option.series = [
        
          name: "Email",
          type: "line",
          stack: "Total",
          data: [120, 132, 101, 134, 90, 230, 210]
        ,
        
          name: "Union Ads",
          type: "line",
          stack: "Total",
          data: [220, 182, 191, 234, 290, 330, 310]
        ,
        
          name: "Video Ads",
          type: "line",
          stack: "Total",
          data: [150, 232, 201, 154, 190, 330, 410]
        ,
        
          name: "Direct",
          type: "line",
          stack: "Total",
          data: [320, 332, 301, 334, 390, 330, 320]
        ,
        
          name: "Search Engine",
          type: "line",
          stack: "Total",
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        
      ];
      this.option.xAxis.data = [
        "Mon",
        "Tue",
        "Wed",
        "Thu",
        "Fri",
        "Sat",
        "Sun"
      ];
    
  
;
</script>

2.4、定义仪表盘模板组件

<template>
  <div ref="chart" :style=" width: '1400px', height: '400px' "></div>
</template>
<script>
import * as echarts from "echarts";
export default 
  name: "PieChart",
  props: 
    opt: 
      type: Object,
      default() 
        return ;
      
    
  ,
  watch: 
    opt: 
      deep: true,
      handler(opt) 
        this.optHandler(opt);
      
    
  ,
  data() 
    return 
      chart: null
    ;
  ,
  mounted() 
    this.init();
  ,
  methods: 
    init() 
      // 初始化
      this.chart = echarts.init(this.$refs.chart);
    ,
    optHandler(option) 
      if (Object.keys(option).length > 0) 
        this.chart.clear()
        this.chart.setOption(
            tooltip: 
                formatter: 'a <br/>b : c%'
            ,
            series: [
                
                name: 'Pressure',
                type: 'gauge',
                detail: 
                    formatter: 'value'
                ,
                data: option.series[0].data
                
            ]
            );
      
    
  
;
</script>

测试代码：

<template>
  <gauge-chart :opt="option"></gauge-chart>
</template>
<script>
import GaugeChart from "@/components/echarts/GaugeChart";
export default 
  name: "GaugeTest",
  components: 
    GaugeChart
  ,
  data() 
    return 
      option: 
        series: [
          
            data: []
          
        ]
      
    ;
  ,
  mounted() 
    this.init();
  ,
  methods: 
    init() 
      this.option.series[0].data = [
                value: 50,
                name: 'SCORE'
            ]
    
  
;
</script>