vue项目中使用Echarts可视化图表

前端小凯

已于 2023-04-02 22:59:19 修改

阅读量208

点赞数

文章标签： echarts vue.js javascript

于 2023-03-13 20:57:09 首次发布

本文链接：https://blog.csdn.net/qq_43235503/article/details/129506218

版权

先在项目中安装echarts

npm install echarts --save-dev

在项目中：


// 第一步 引入echarts
import * as echarts from "echarts";



<!-- 第二步 创建存放echarts的容器 -->
<div class="content" ref="content"></div>



// 第三步 找到存放echarts的容器
let div = this.$refs.content;
      
// 第四步 创建echarts的实例
let myChart = echarts.init(div);
      
// 第五步 配置option项
let option = {
   title: {
      text: "Basic Radar Chart",
     },
   legend: {
          data: ["Allocated Budget", "Actual Spending"],
     },
   radar: {
          // shape: 'circle',
          indicator: [
            { name: "Sales", max: 6500 },
            { name: "Administration", max: 16000 },
            { name: "Information Technology", max: 30000 },
            { name: "Customer Support", max: 38000 },
            { name: "Development", max: 52000 },
            { name: "Marketing", max: 25000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "Allocated Budget",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "Actual Spending",
              },
            ],
          },
        ],
      };
     
// 第六步 使用配置项
myChart.setOption(option);

效果：