Echarts数据可视化使用

Echarts

• 使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，底层依赖矢量图形库 ZRender
• [官网地址](https://echarts.apache.org/zh/index.html)

Echarts使用步骤

全局引入

• 第一步 下载echarts
• 第二步 引入echarts

<script src="./js/echarts.min.js"></script>

• 第三步 准备一个具有大小的DOM容器

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

• 第四步 初始化Echarts实例对象

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

• 第五步 指定配置项和数据(option)

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

• 第六步 将配置项设置给echarts实例对象

myChart.setOption(option);

局部按需引入

<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
// 完整加载过程
// var echarts = require('echarts')
    
// 改成按需加载
var echarts = require('echarts/lib/echarts') // 引入echarts主模块
require('echarts/lib/chart/radar') // 引入雷达图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
    
// BUG: 如果首页雷达图报错[ECharts] Component legend is used but not imported.
require('echarts/lib/component/legend')

export default {
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
    myChart.setOption({
      title: {
        text: '基础雷达图'
      },
      tooltip: {},
      legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
      },
      radar: {
        // shape: 'circle',
        name: {
          textStyle: {
            color: '#fff',
            backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5]
          }
        },
        // 每个区域的最高值
        indicator: [
          { name: '工作效率', max: 100 },
          { name: '考勤', max: 100 },
          { name: '积极性', max: 100 },
          { name: '帮助同事', max: 100 },
          { name: '自主学习', max: 100 },
          { name: '正确率', max: 100 }
        ]
      },
      series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
          {
            value: [10, 1, 100, 5, 100, 0],
            name: '张三'
          },
          {
            value: [50, 50, 50, 50, 50, 10],
            name: '李四'
          }
        ]
      }]
    })
  }
}
</script>

<style>
.radar-echart {
    width: 600px;
    height: 400px;
}
</style>

Echarts基础配置

• series 系列列表。每个系列通过 type 决定自己的图表类型
• xAxis：直角坐标系 grid 中的 x 轴
• yAxis：直角坐标系 grid 中的 y 轴
• grid：直角坐标系内绘图网格。
• title：标题组件
• tooltip：提示框组件
• legend：图例组件
• color：调色盘颜色列表
  

边框图片

• border-image
  
• `切割原理 :把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕。
• 切割顺序 上右下左
  
• 边框图片语法
  

 		div {
            width: 400px;
            height: 300px;
            border: 15px solid pink;
            border-image-source: url(images/border.png);
            /* 不要跟单位 */
            border-image-slice: 30 30 30 30;
            /* border-image-slice: 30; */
            /* 这个属性默认的是 border的宽度 但是 有区别，  这个是 边框图片的宽度 不会挤压文字 */
            border-image-width: 30px;
            border-image-repeat: round;

        }