ECharts+Vue实现数据可视化

麻辣翅尖

已于 2022-04-17 16:18:23 修改

阅读量2.7k

点赞数 4

分类专栏： Vue 文章标签： echarts vue.js

于 2022-04-08 09:08:09 首次发布

本文链接：https://blog.csdn.net/weixin_52418790/article/details/123999073

版权

Vue 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

ECharts 特性：

丰富的可视化类型： 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

多种数据格式无需转换直接使用: 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。

千万数据的前端展现: 通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量。

移动端优化: 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。

多渲染方案，跨平台使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。

深度的交互式数据探索: 提供了图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。

多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等，传入的数据也可以是多个维度的。

动态数据: 数据的改变驱动图表展现的改变。

绚丽的特效: 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。

通过 GL 实现更多更强大绚丽的三维可视化: 在 VR，大屏场景里实现三维的可视化效果。

示例：

<template>
  <!--1.设置DOM容器，必须要设置宽高，否则不显示-->
  <div id="Charts" ref="Echarts" ></div>
</template>

<script>
//2.引入echartjs
import * as echarts from "echarts";

export default {
  name: "chart",
  data(){
    return{
    }
  },
  created() {
    //方法一：created()延迟加载getChart方法，先加载dom，否则会报错
    //方法二：使用mounted()挂载
    setTimeout(() => {
      this.getChart()
    }, 1000);
  },
  methods:{
    getChart(){
      //3.定义图标对象myChart，初始化echarts实例
      let myChart=echarts.init(this.$refs.Echarts)
      //或 let myChart=echarts.init(document.getElementById("Charts"))

      // 4.添加配置项
      let options={
        title: {  //标题
          text: 'ECharts 入门示例',  //主标题文本
          left:'150',
          top:10,
        },
        tooltip: {}, //提示框
        xAxis: {  //配置要在 X 轴显示的项:
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},  //配置要在 Y 轴显示的项:
        series: [
          {
            name: '销量',
            type: 'bar', //bar柱形图 line折线图 pie饼图 scatter散点图
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      // 5.将配置给myChart
      myChart.setOption(options)
    }
  }

}
</script>

<style scoped>
#Charts{
  width: 500px;
  height: 500px;
}
</style>

在这里插入图片描述

1、title设置：

        title: {  //标题
          text: 'ECharts 入门示例',  //主标题文本
          left:150,
          top:10,
          link:'https://echarts.apache.org/examples/zh/',  //主标题文本超链接
          target:'blank' ,//指定窗口打开主标题超链接
          textStyle:{   //设置主标题样式
            color:'#333'
          },
          subtext:'副标题',
        },

2、tooltip设置

		tooltip: { //提示框
          show:'true',
          trigger:'axis',  //触发类型 item图形触发
          axisPointer:{   //坐标轴指示器
            type:"cross" //line显示一个实线 shadow阴影效果 cross十字准星
          },
          backgroundColor:"pink",
          borderColor:"blue",
          borderWidth:3,
          textStyle:{ //提示框浮层的文本样式。
            color:'#333',
          },
       }

自定义tooltip

          formatter(params){  //自定义提示框
            console.log(params)  //打印出来数组信息
          },

查看打印出来的params
在这里插入图片描述
为了方便，我们将data数据稍作修改：

        series: [
          {
            name: '销量',
            type: 'bar', //bar柱形图 line折线图 pie饼图 scatter散点图
            data: [
              {"value":"5","date":"2022-4-8"},
              {"value":"8","date":"2023-4-8"},
              {"value":"6","date":"2028-4-8"},
              {"value":"10","date":"2012-4-8"},
              {"value":"13","date":"2025-4-8"},
              {"value":"15","date":"2026-4-8"},
            ]
          }
        ]

再次打印我们可以看到打印出来的数据中data：包含了数据信息
在这里插入图片描述

        tooltip: { //提示框
          show:'true',
          trigger:'axis',  //触发类型 item图形触发
          formatter(params){  //自定义提示框
            // console.log(params)  //打印出来数组信息
            for (var i=0;i<params.length;i++){
              return "名字："+params[i].name +`<br/>`
                +"价格："+params[i].data.value + `<br/>`
                +"生产日期："+params[i].data.date
            }
          },
        },

在这里插入图片描述

3、series

每个系列通过 type 决定自己的图表类型:

series: [{
    name: '销量',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

4、legend

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: {
    data: [{
        name: '系列1',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
            color: 'red'
        }
    }]
}

5、设置每个item的样式

柱条的样式可以通过 series.itemStyle 设置，包括：

柱条的颜色（color）
柱条的描边颜色（borderColor）、宽度（borderWidth）、样式（borderType）
柱条圆角的半径（barBorderRadius）；柱条透明度（opacity）
阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）

  series: [
    {
      type: 'bar',
      data: [
        10,
        22,
        28,
        {
          value: 43,
          // 设置单个柱子的样式
          itemStyle: {
            color: '#91cc75',
            shadowColor: '#91cc75',
            borderType: 'dashed',
            opacity: 0.5
          }
        },
        49
      ],
      itemStyle: {
        barBorderRadius: 5,
        borderWidth: 1,
        borderType: 'solid',
        borderColor: '#73c0de',
        shadowColor: '#5470c6',
        shadowBlur: 3
      }
    }
  ]