echarts

​

echarts数据可视化大屏

​

echarts官网：Examples - Apache ECharts

echarts，有很多中类型，其中我们用的最为广泛的是 折线图 柱状图 饼图

现在来举例：

折线图：

html中

1）首先需要引入echarts.js文件

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

2）然后设置一个div盒子（一定要设置宽高，因为echarts是没有宽高的，没有宽高是显示不出来的）

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

3）在script中，通过document.querySelector获取到div标签

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

4）对div表情实时echarts初始化 通过init初始化

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

5) 指定图表的配置项和数据

var option = {
        //title是表头，option里面的数据都可以通过echarts官网的文档中进行查询
        title: {
          text: 'ECharts 入门示例'
        },
        //提示框组件
        tooltip: {},
        //图例组件
        legend: {
          data: ['销量']
        },
        //x轴  默认是横向的轴
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        //y轴 默认是纵轴
        yAxis: {},
        //系列  ！！！很重要哦
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

6)使用刚指定的配置项和数据显示图表

myChart.setOption(option);

7）上述option中的所有数据 都可以在echarts官方文档中进行查询

​

---

​

vue中的使用

饼状图

1）创建vue项目，下载echarts插件，并且在组件中引用

import * as echarts from 'echarts';

2）获取标签，并初始化

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

3）指定图表的配置项和数据

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

4）使用刚指定的配置项和数据显示图表

myChart.setOption(option);

---

上述所有东西，都可以在echarts中进行查询，文档中的配置项手册中