vue 项目引入eacharts流程

本文链接：https://blog.csdn.net/m0_54421294/article/details/123687552

本文介绍了如何在Vue.js项目中安装和使用ECharts 4.8.0版本创建定制化的雷达图。首先，通过npm安装ECharts并将其挂载到Vue原型上。接着，在组件中初始化图表，定义雷达图的配置项，包括两个雷达图实例，数据系列和样式。最后展示了版本切换的方法，并建议避免使用最新版本。

摘要由CSDN通过智能技术生成

eachart官网：Examples - Apache ECharts

效果图：

步骤一：

npm install echarts@4.8.0 --save

步骤二：在main.js中添加

// 引入echarts

import echarts from "echarts";

Vue.prototype.$echarts = echarts;

步骤三：随便一个页面中

<template>
  <div class="about">
   <div id="charts" style="width: 845px; height: 510px"></div>
  </div>
</template>
<script>

import echarts from "echarts"; //如果是饼图需要加这个
 export default {
   data() {
            return {}
        },
         

  mounted () {
    this.initChart()
  },
        
  methods: {
    initChart () {
      const myChart = this.$echarts.init(document.getElementById('charts'))
         let option = {
  color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
  title: {
    text: 'Customized Radar Chart'
  },
  legend: {},
  radar: [
    {
      indicator: [
        { text: 'Indicator1' },
        { text: 'Indicator2' },
        { text: 'Indicator3' },
        { text: 'Indicator4' },
        { text: 'Indicator5' }
      ],
      center: ['25%', '50%'],
      radius: 120,
      startAngle: 90,
      splitNumber: 4,
      shape: 'circle',
      axisName: {
        formatter: '【{value}】',
        color: '#428BD4'
      },
      splitArea: {
        areaStyle: {
          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)'
        }
      }
    },
    {
      indicator: [
        { text: 'Indicator1', max: 150 },
        { text: 'Indicator2', max: 150 },
        { text: 'Indicator3', max: 150 },
        { text: 'Indicator4', max: 120 },
        { text: 'Indicator5', max: 108 },
        { text: 'Indicator6', max: 72 }
      ],
      center: ['75%', '50%'],
      radius: 120,
      axisName: {
        color: '#fff',
        backgroundColor: '#666',
        borderRadius: 3,
        padding: [3, 5]
      }
    }
  ],
  series: [
    {
      type: 'radar',
      emphasis: {
        lineStyle: {
          width: 4
        }
      },
      data: [
        {
          value: [100, 8, 0.4, -80, 2000],
          name: 'Data A'
        },
        {
          value: [60, 5, 0.3, -100, 1500],
          name: 'Data B',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.6)'
          }
        }
      ]
    },
    {
      type: 'radar',
      radarIndex: 1,
      data: [
        {
          value: [120, 118, 130, 100, 99, 70],
          name: 'Data C',
          symbol: 'rect',
          symbolSize: 12,
          lineStyle: {
            type: 'dashed'
          },
          label: {
            show: true,
            formatter: function (params) {
              return params.value;
            }
          }
        },
        {
          value: [100, 93, 50, 90, 70, 60],
          name: 'Data D',
          areaStyle: {
            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              {
                color: 'rgba(255, 145, 124, 0.1)',
                offset: 0
              },
              {
                color: 'rgba(255, 145, 124, 0.9)',
                offset: 1
              }
            ])
          }
        }
      ]
    }
  ]
         };
    //   let option = {
    //     xAxis: {
    //       type: 'category',
    //       data: ['4', '5', '6', '7', '8', '9', '10'],
    //       splitLine: { show: true, // 纵向分割线显示
    //         lineStyle: { // 纵向分割线样式设置
    //           color: 'rgba(242,237,207,1)' // 如果值是一个数组的话 就可以给每条线设置不同样式
    //         }
    //       },
    //       splitArea: { show: false }, // 纵向背景区域
    //       axisTick: { show: false }, // 除去x轴的刻度
    //       axisLine: {
    //         lineStyle: { color: '#ccc', width: 0, height: 0 } // x轴
    //       },
    //       boundaryGap: false, // 使折点与x轴的数值对齐 为true时是与刻度对齐
    //       axisLabel: { // 控制x轴文本
    //         show: true,
    //         textStyle: { color: '#ccc', fontSize: 12 }
    //       }
    //     },
    //     yAxis: {
    //       type: 'value',
    //       splitLine: { show: false },
    //       axisLine: {
    //         lineStyle: { color: '#fff', width: 0 } // y轴
    //       }
    //     },
    //     series: [{
    //       lineStyle: { // 折线颜色
    //         normal: {
    //           color: '#F6C20A'
    //         }
    //       },
    //       smooth: true,
    //       // symbol: 'circle', //设定为实心点
    //       symbolSize: 4, // 设置折点的大小
    //       itemStyle: {
    //         normal: { // 折点颜色
    //           label: { // 为true时  设置拐点上方值 格式'{b}:{c}'
    //             show: false,
    //             formatter: '{c}'
    //           },
    //           color: '#F6C20A',
    //           width: 3
    //         },
    //         emphasis: {
    //           label: {
    //             show: true
    //           }
    //         }
    //       },
    //       // data: [45, 50, 51, 50, 49, 48, 53],
    //       data: [
    //         { value: 45 },
    //         { value: 50 },
    //         { value: 51 },
    //         { value: 50 },
    //         { value: 49 },
    //         { value: 48 },
    //         { value: 60, label: { show: true } } // 给指定的拐点上方显示值
    //       ],
    //       type: 'line'
    //     }],
    //     grid: { // 设置网格距离canvase外层盒子距离
    //       x: 40,
    //       y: 30,
    //       x2: 40,
    //       y2: 70
    //     }
    //   }

     myChart.setOption(option);
    },
      
  }   
 }
</script>

<style scoped>

</style>

版本切换：

卸载：npm uninstall echarts

换版本：npm install --save echarts@4.1.0

建议不要用最新版本