Ant Design Vue 使用 ECharts（vue、Typescript）

展示

　　

一、安装依赖

　　npm install echarts --save

二、全局引用

　　import * as echarts from 'echarts'

　　Vue.prototype.$echarts = echarts

三、例VUE

 <  template  > 
   <  div   id  ="myChart"   style  ="height: 300px; width: 600px"  ></  div  > 
 </  template  > 

 <  script  >  
export   default   {
  name:   "  EChartsDemo  "  ,
  data() {
      return   {
      msg:   "  ECharts Demo  "  ,
    };
  },
  mounted() {
      this  .drawChart();
  },
  methods: {
    drawChart() {
        //   基于准备好的dom，初始化echarts实例 
       let myChart   =   this  .$echarts.init(document.getElementById(  "  myChart  "  ));
        //   指定图表的配置项和数据 
       let option   =   {
        xAxis: {
          type:   "  category  "  ,
          data: [  "  Mon  "  ,   "  Tue  "  ,   "  Wed  "  ,   "  Thu  "  ,   "  Fri  "  ,   "  Sat  "  ,   "  Sun  "  ],
        },
        yAxis: {
          type:   "  value  "  ,
        },
        series: [
          {
            data: [
                120  ,
              {
                value:   200  ,
                itemStyle: {
                  color:   "  #a90000  "  ,
                },
              },
                150  ,
                80  ,
                70  ,
                110  ,
                130  ,
            ],
            type:   "  bar  "  ,
          },
        ],
      };
        //   使用刚指定的配置项和数据显示图表。 
       myChart.setOption(option);
    },
  },
};
  </  script  > 

四、例Typescript

 <  template  > 
   <  div   :style  ="{ background: '#fff', padding: '24px', minHeight: '83vh' }"  > 
     <  div
        id  ="myChart1"  
      style  ="
        height: 500px;
        width: 800px;
        border: 1px solid red;
        display: inline-block;
      " 
     ></  div  > 
   </  div  > 
 </  template  > 
 <  script   lang  ="ts"  >  
import { Vue, Component, Prop } from   "  vue-property-decorator  "  ;

@Component({
  components: {},
})
export   default   class Report extends Vue {
  mounted() {
      this  .drawChart();
      this  .$emit(  "  selectMenu  "  ,   3  );
  }
  drawChart() {
      //   基于准备好的dom，初始化echarts实例 
     let myChart1   =   (  this   as any).$echarts.init(
      document.getElementById(  "  myChart1  "  )
    );  //   指定图表的配置项和数据 
     let option1   =   {
      title: {
        text:   "  Stacked Area Chart  "  ,
      },
      tooltip: {
        trigger:   "  axis  "  ,
        axisPointer: {
          type:   "  cross  "  ,
          label: {
            backgroundColor:   "  #6a7985  "  ,
          },
        },
      },
      legend: {
        data: [  "  Email  "  ,   "  Union Ads  "  ,   "  Video Ads  "  ,   "  Direct  "  ,   "  Search Engine  "  ],
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left:   "  3%  "  ,
        right:   "  4%  "  ,
        bottom:   "  3%  "  ,
        containLabel:   true  ,
      },
      xAxis: [
        {
          type:   "  category  "  ,
          boundaryGap:   false  ,
          data: [  "  Mon  "  ,   "  Tue  "  ,   "  Wed  "  ,   "  Thu  "  ,   "  Fri  "  ,   "  Sat  "  ,   "  Sun  "  ],
        },
      ],
      yAxis: [
        {
          type:   "  value  "  ,
        },
      ],
      series: [
        {
          name:   "  Email  "  ,
          type:   "  line  "  ,
          stack:   "  Total  "  ,
          areaStyle: {},
          emphasis: {
            focus:   "  series  "  ,
          },
          data: [  120  ,   132  ,   101  ,   134  ,   90  ,   230  ,   210  ],
        },
        {
          name:   "  Union Ads  "  ,
          type:   "  line  "  ,
          stack:   "  Total  "  ,
          areaStyle: {},
          emphasis: {
            focus:   "  series  "  ,
          },
          data: [  220  ,   182  ,   191  ,   234  ,   290  ,   330  ,   310  ],
        },
        {
          name:   "  Video Ads  "  ,
          type:   "  line  "  ,
          stack:   "  Total  "  ,
          areaStyle: {},
          emphasis: {
            focus:   "  series  "  ,
          },
          data: [  150  ,   232  ,   201  ,   154  ,   190  ,   330  ,   410  ],
        },
        {
          name:   "  Direct  "  ,
          type:   "  line  "  ,
          stack:   "  Total  "  ,
          areaStyle: {},
          emphasis: {
            focus:   "  series  "  ,
          },
          data: [  320  ,   332  ,   301  ,   334  ,   390  ,   330  ,   320  ],
        },
        {
          name:   "  Search Engine  "  ,
          type:   "  line  "  ,
          stack:   "  Total  "  ,
          label: {
            show:   true  ,
            position:   "  top  "  ,
          },
          areaStyle: {},
          emphasis: {
            focus:   "  series  "  ,
          },
          data: [  820  ,   932  ,   901  ,   934  ,   1290  ,   1330  ,   1320  ],
        },
      ],
    };  //   使用刚指定的配置项和数据显示图表。 
     myChart1.setOption(option1);
  }
}
  </  script  > 

 

 

查看更多关于Ant Design Vue 使用 ECharts（vue、Typescript）的详细内容...