大数据可视化

1. 说明是大数据可视化
   • 所谓大数据可视化就是用图表来形象的表示数据，然后在网页 - 微信小程序、app中展示
2. 大数据可视化实现的手段
   • Echarts
   • HighCharts
   • Charts
3. 学习一个文档
   1. 首先要找官网网站
   2. 下在资源 【 下载 、 download 】
   3. 找快速教程 【 5分钟快速上手、quick start 、示例教程 、。。。 】
   4. 实现快速教程中的案例
   5. 学习的是它的配置项和它的api ,但是着两项比较复杂了，我们学习起来比较费力
      • 找实例演示，然后复制实例演示中的代码

没有使用框架普通的Echarts的使用步骤

• 引入方式
  • cdn
  • npm安装

  npm install echarts --save
  

• 在结构中引入一句代码

• 在 script中写入下列代码

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
  
      // 指定图表的配置项和数据
      var option = {
          title: {
              text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
              data:['销量']
          },
          xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
      };
  
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
  

Vue项目中Echarts的使用

• 安装Echarts
• 引入

  import echarts from "echarts";
  

• 引入自己封装的数据请求

  import request from 'utils/request'  
  

• script中的代码

  export default {
    //页面刷新就要有数据，所以使用mounted或者Create钩子函数
    async mounted() {
      var myChart = echarts.init(document.getElementById("main"));
      //数据请求是异步的，所以要将异步处理成同步(async await)
      const result = await request({
          //其中mock为模拟数据
          url: '/mock/charts.json'
      })
  
      const option = {
        title: {
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} 
  {b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: result.data 
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
  
      myChart.setOption(option);
    }
  };
  </script>