vue项目中使用echarts

介绍：

一.简述数据可视化技术

1. 什么是数据可视化技术

   借助图形化的数段，清晰有效的传递和沟通信息，以视觉的方式展现数据，便于用户的认知，偏于图表的样式，相对于文字说明更加直观

   • 科学可视化（出现最早，最成熟）
     • 处理科学数据，面向科学和工程数据方面，研究带有空间坐标和几何信息的三维空间，如何呈现数据中的几何特征
     • 主要面向自然科技中产生数据的建模操作和处理
     • 应用于医疗（透析，CT），科研，航天，天气，生物等技术
   • 信息可视化（更常见，接触更多）
     • 科学可视化演变而来，主要处理非结构化，非几何的数据
     • 金融交易，社交网络，文本数据展示
     • 减少视觉混淆对有用数据的干扰，把无用的数据过滤掉，而非简单信息的堆叠（数据加工，提取可用信息）
     • 更倾向于展示信息
   • 可视化分析（前两者的结合）
     • 分析数据导向进行展示，需要了解具体的事物逻辑

2. 数据可视化技术优点

   • 分析出数据的趋势
   • 进行精准的广告投放
   • 信息快人一步，优先获取信息就有更大的优势

3. 数据可视化技术借助的软件

二.Echarts概述

  1.什么是echarts?

      百度团队开发的，提供了一些直观，易用的交互方式以便于对展示数据进行挖掘.提取.修正或整合，拥有互动图形用户界面的深度数据可视化工具

   2.echarts特性

• 拖拽重计算：拖动实现数据重新计算
• 数据视图：通过编辑功能批量修改数据
• 动态类型切换：动态切换不同类型的图表展示数据，针对用户不同需求，对数据进行更多的解读
• 多图联动：多列数据根据条件一同修改
• 百搭时间轴：根据时间动态的改变
• 大规模散点：大数据查找，需要专业工具
• 动态数据添加：实时改变数据变化
• 商业BI：用于商业数据展示
• 特效：吸引眼球功能

使用：

一、直接引入echarts

   1.安装echarts项目依赖    npm install echarts --save

2.安装完成后 ECharts 和 zrender 会放在 node_modules 目录下，我们可以直接在项目代码中使用 require('echarts') 来使用。
  或者在main.js中全局引入   import echarts from "echarts";     Vue.prototype.$echarts = echarts;

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
<script>
   mounted(){
        this. drawChart();
    },
  methods:{
        drawChart(){
            var echarts = require('echarts');
           // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            //或者全局引入的的时候   不需要require('echarts');
            // let myChart = this.$echarts.init(document.getElementById("main"));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                    axisLabel:{//x坐标轴刻度标签
                        show:true,
                        color:'red',//'#ccc'，设置标签颜色
                    },
                    axisLine:{//x坐标轴轴线
                        show:true,
                        lineStyle:{//x坐标轴轴线样式
                            color:'yellow',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
                        }
                    }
                },
               yAxis: {},
               series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
         },
    }
</script>

二、使用 Vue-ECharts 组件

   1.安装组件 

npm install vue-echarts -S

2.使用组件：main.js中引入

import Vue from 'vue'
import ECharts from 'vue-echarts' // 在 webpack 环境下指向 components/ECharts.vue

// 手动引入 ECharts 各模块来减小打包体积
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

// 如果需要配合 ECharts 扩展使用，只需要直接引入扩展包即可
// 以 ECharts-GL 为例：
// 需要安装依赖：npm install --save echarts-gl，并添加如下引用
import 'echarts-gl'

// 注册组件后即可使用
Vue.component('v-chart', ECharts)

或者在组件中引入：

<script>
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/bar";
export default {
  name: "App",
  components: {
    "v-chart": ECharts
  },
};
</script>

注意事项：

    Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本，如果你正在使用官方的 Vue CLI 来创建项目，可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。请按如下方法修改配置：

     当使用 Vue CLI 3+ 时，需要在 vue.config.js 中的 transpileDependencies 增加 vue-echarts 及 resize-detector，如下：

module.exports = {
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ]
}

当使用 Vue CLI 2 的 webpack 模板时，需要按下述的方式修改 build/webpack.base.conf.js：

  {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'), 
          resolve('test'), 
          resolve('node_modules/webpack-dev-server/client'),
          resolve('node_modules/vue-echarts'),
          resolve('node_modules/resize-detector')]
   }

<template>
  <div id="app">
    <v-chart class="my-chart" :options="bar"/>
  </div>
</template>
<script>
  data: function() {
    return {
      bar: {
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    };
  }
};
</script>
<style>
.my-chart {
  width: 800px;
  height: 500px;
}
</style>