Echarts实现数据可视化（入门篇）

ECharts的基本使用

官网地址：Apache ECharts

ECharts的快速上手

步骤1：下载echarts.js文件

从 npm 安装

npm install echarts

步骤2：引入echarts.js文件

// index.html文件中引入方式：
<script src="./lib/echarts.min.js"></script>

// index.vue文件中引入方式：
import * as echarts from 'echarts'

步骤3：准备一个呈现图表的盒子

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

步骤4：初始化echarts实例对象

var myEcharts = echarts.init(document.querySelector('.baout'));

步骤5：准备配置项

 // 指定图表的配置项和数据
    let option = {
      title: {
        text: 'ECharts 入门示例',
        link: 'www.baidu.com',
        target: 'blank',
        textStyle: {},
        textAlign: 'auto',
        left: '10%',
      },
      tooltip: {},
      legend: {
        data: [
          {
            name: '销量',
            icon: 'circle',
          },
        ],
        itemWidth: 15,
      },
      //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      toolbox: {
        feature: {
          saveAsImage: {}, //导出图片
          dataView: {}, //数据视图
          restore: {}, //重置
          dataZoom: {}, //区域缩放
          magicType: {
            //动态类型切换
            type: ['line', 'bar'],
          },
        },
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      grid: {},
      series: [
        {
          type: 'bar',
          name: '销量',
          data: [5, 20, 36, 10, 10, 20],
          //  图表标注
          markPoint: {
            data: [
              {
                type: 'max',
                name: '最大值',
              },
              {
                type: 'min',
                name: '最小值',
              },
            ],
          },
          //  图表标线
          markLine: {
            data: [
              {
                type: 'average',
                name: '平均值',
              },
            ],
          },
          //  数值显示
          label: {
            show: true,
            rotate: 60,
            position: 'top',
          },
        },
      ],
    }

步骤6：将配置项设置给echarts实例对象

myECharts.setOption(option);

ECharts实例-柱状图

vue单页面中完整引入Echarts

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

<script>
// 引入echarts
import * as echarts from 'echarts'
export default {
  mounted() {
    let myCharts = echarts.init(document.querySelector('.about'))

    // 指定图表的配置项和数据
    // 指定图表的配置项和数据
    let option = {
      title: {
        text: 'ECharts 入门示例',
        link: 'www.baidu.com',
        target: 'blank',
        textStyle: {},
        textAlign: 'auto',
        left: '10%',
      },
      tooltip: {},
      legend: {
        data: [
          {
            name: '销量',
            icon: 'circle',
          },
        ],
        itemWidth: 15,
      },
      //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      toolbox: {
        feature: {
          saveAsImage: {}, //导出图片
          dataView: {}, //数据视图
          restore: {}, //重置
          dataZoom: {}, //区域缩放
          magicType: {
            //动态类型切换
            type: ['line', 'bar'],
          },
        },
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      grid: {},
      series: [
        {
          type: 'bar',
          name: '销量',
          data: [5, 20, 36, 10, 10, 20],
          //  图表标注
          markPoint: {
            data: [
              {
                type: 'max',
                name: '最大值',
              },
              {
                type: 'min',
                name: '最小值',
              },
            ],
          },
          //  图表标线
          markLine: {
            data: [
              {
                type: 'average',
                name: '平均值',
              },
            ],
          },
          //  数值显示
          label: {
            show: true,
            rotate: 60,
            position: 'top',
          },
        },
      ],
    }
    // 使用刚指定的配置项和数据显示图表。
    myCharts.setOption(option)
  },
}
</script>/

 实现效果