数据可视化基础 - echarts基础

1.下载资源 新建项目

去官网下载echarts压缩包，在包里的dist文件里找到echarts.min.js文件

Handbook - Apache EChartsecharts.apache.org/handbook/zh…

新建一个项目，创建lib文件夹存放echarts库文件，创建views文件夹存放页面，再将echarts.min.js复制到lib文件夹下

2.引入echarts

//方式1：在views文件夹下新建一个html页面，并在页面中引入echarts；
<script src="../lib/echarts.min.js"></script>

//方式2：vue项目在main.js中引入echarts；
import * as echarts from "echarts";

//方式3：在终端执行安装echarts命令自动引入；
`npm install echarts`

3.准备一个呈现图表的盒子，与初始化echarts实例对象

<div style="width:600px;height:400px"></div>

var mCharts = echarts.init(document.querySelector('div'))

4.准备配置项

option = {
  radar: {
    // shape: 'circle',
    radius:"66%",
    center:["50%","42%"],
    splitNumber:8,
    splitArea:{
      areaStyle:{
        color:"rgba(127,95,132,.3)",
        opacity:1,
        shadowBlur:45,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX:0,
        shadowOffsetY :15,
      }
    },
    indicator: [
      { name: '销售', max: 6500 },
      { name: '政府', max: 16000 },
      { name: '信息技术', max: 30000 },
      { name: '客户支持', max: 38000 },
      { name: '发展', max: 52000 },
      { name: '市场', max: 25000 }
    ]
  },
    legend: {
      left:"center",
      bottom:"10",
    data: ['分配预算', '预计支出','实际支出']
  },
  series: [  //series中可以配置多个图形，实现一个容器多个图形
    {
      type: 'radar',   //type决定了是要使用那种图形进行数据可视化
      symbolSize:0,
      areaStyle:{
        normal:{
             shadowBlur:13,
             shadowColor:"rgba(0,0,0,.2)",
             shadowOffsetX:0,
             shadowOffsetY:10,
             opacity:1,
        }
      },
      data: [
         {
                value: [5000, 7000, 12000, 11000, 15000, 14000],
                name: "分配预算",
                
              },
              {
                value: [4000, 9000, 15000, 15000, 13000, 11000],
                name: "预计支出",
              },
              {
                value: [5500, 11000, 12000, 15000, 12000, 12000],
                name: "实际支出",
              },
      ]
    }
  ]
};

5.将配置项设置给echarts实例对象

mCharts.setOption(option)

6.生成

7.实现一个容器放置一个图标（完整代码）

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

option && myChart.setOption(option);

（p.s:多个echarts图标就需要创建多个容器和echarts实例，再按需求按步骤实现就可以了。）

8. 实现一个容器放置多个图标（配置项多看文档，背不完的ahhh）

实现方法：在series配置项中配置多个图标配置项