vue 引入 echart

Posted 2021-09-03 Tong_sunshine

1. 安装echarts依赖 npm install echarts --save
2. 在main.js中全局中引用

import echarts from \'echarts\'
Vue.prototype.$echarts = echarts

<div id="main" style="width:100%;height:376px"></div>

 mounted(){
    this.getEchartData()  
    },


   methods: {
    getEchartData() {
          var chartDom = document.getElementById(\'main\');
          var myChart = echarts.init(chartDom);
          var option;
          
          option = {
              title: {
                  text: \'某站点用户访问来源\',
                  subtext: \'纯属虚构\',
                  left: \'center\'
              },
              tooltip: {
                  trigger: \'item\'
              },
              legend: {
                  orient: \'vertical\',
                  left: \'left\',
              },
              series: [
                  {
                      name: \'访问来源\',
                      type: \'pie\',
                      radius: \'50%\',
                      data: [
                          {value: 1048, name: \'搜索引擎\'},
                          {value: 735, name: \'直接访问\'},
                          {value: 580, name: \'邮件营销\'},
                          {value: 484, name: \'联盟广告\'},
                          {value: 300, name: \'视频广告\'}
                      ],
                      emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: \'rgba(0, 0, 0, 0.5)\'
                          }
                      }
                  }
              ]
          };
          
          option && myChart.setOption(option);  
    }
  },