在vue中使用echart

附上echart官网链接：

https://www.echartsjs.com/zh/index.html

1、安装echart依赖

npm install echarts --save

2、在main.js中全局引用

import echarts from 'echarts';


Vue.prototype.$echarts = echarts;

3、在需要使用echart的组件中先设置一个带宽高的div

<!--ref用来获取结构，不建议用getElementByxx -->
 <div ref="mychart" class="radar"></div>

4、如果是一上来就运行echart的话，在mounted中调用一下，我只写一下具体操作,下面代码是实现一个雷达图。自己调整了颜色，具体颜色可以根据我写的看看是那个部分的进行修改

getEchartData() {
     
          this.chart =this.$echarts.init(this.$refs.mychart);
            this.chart.setOption({
                      // title: {
                      //     text: '自定义雷达图'
                      // },
                      legend: {
                          data: ['图一'],
                          show:false
                      },
                      radar: [
                          {
                              indicator: [
                                  { text: `一` , max:100},
                                  { text: `二`,max:100 },
                                  { text:`三` ,max:100},
                                  { text: `四` ,max:100}
                              ],
                              center: ['50%', '40%'],
                              radius: '65%',
                              startAngle: 90,
                              splitNumber: 4,
                              shape: 'circle',
                              name: {
                                  formatter:'{value}',
                                  textStyle: {
                                        color: '#fff',
                                        backgroundColor:'#E53D3E' ,
                                        borderRadius: 8,
                                        padding: [3, 5],
                                        fontSize:11
                                  }
                                 
                              },
                              nameGap:5,
                              splitArea: {
                                  areaStyle: {
                                      color: ['#F3E9E0',
                                      '#EADACC', '#E1CBB7',
                                      '#DDC2A7'],
                                      // shadowColor: 'rgba(0, 0, 0, 0.3)',
                                      // shadowBlur: 10
                                  }
                              },
                              axisLine: {
                                  lineStyle: {
                                      color: 'rgba(255, 255, 255, 0.2)',
                                       type:'dashed'
                                  }
                              },
                              splitLine: {
                                  lineStyle: {
                                      color: 'rgba(255, 255, 255, 0.1)',
                                     
                                  }
                              }
                          }
                      ],
                      series: [
                          {
                              name: '雷达图',
                              type: 'radar',
                              itemStyle: {
                                  emphasis: {
                                      // color:"#fff",
                                      // lineStyle: {
                                      //     width: 3
                                      // }
                                  }
                              },
                             animationDuration:2000,
                              data: [
                                  {
                                      value: ['12','22','33','97'],
                                      name: '图一',
                                      symbol: 'circle',
                                      symbolSize: 6,
                                      lineStyle: {
                                          normal: {
                                              type: 'solid',
                                              color:"#E53D3E",                                                                          
                                          }
                                      },
                                      areaStyle:{
                                        color:"rgba(229,61,62,0.19)"
                                      },
                                   
                                  }
                              ]
                          },
                         
                              
                      ]
                  });
           
          },