Echarts基础学习笔记

ECharts是一个使用 JavaScript 实现的开源可视化库，提供了丰富的图表类型和交互能力，使用户能够通过简单的配置生成各种各样的图表。

官方文档还是比较详细的，但是掌握好ECharts自定义样式还是挺复杂的。

VUE中的简单使用

安装Echarts

npm install echarts --save

项目中使用

使用了官方文档的例子

<template>
  <div class="Echarts">
    <div id="main" style="width: 800px;height:400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
export default {
  name: 'Echarts',
  methods:{
	  myEcharts(){
		  // 基于准备好的dom，初始化echarts实例
		  var myChart = this.$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);
		  }
  },
  mounted() {
  	this.myEcharts();
  }
}
</script>

概念

系列

系列（series）是指：一组数值映射成对应的图 【一个系列对应一张图，series中的一个子项对应一张图。】

数据集

ECharts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理。数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。

• 指定 数据集 的列（column）还是行（row）映射为 系列（series）

series: [
    // 这几个系列会出现在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    // 这几个系列会出现在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
  ]

• 数据到图形的映射

 series: [
    {
      type: 'bar',
      encode: {
        // 将 "amount" 列映射到 X 轴。
        x: 'amount',
        // 将 "product" 列映射到 Y 轴。
        y: 'product'
      }
    }
  ]

核心组件

ECharts 图表中有这些主要的组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）等等。

图例(legend)

图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例用legend对象来设置，并和series.name绑定。

legend: {
	  data: [{
	    name: '饼图',
	    icon: 'circle',
	    textStyle: {
	      color: 'red'
	    }
	  }, '折线图', '柱状图'],
	  left: 300,
	},
},

工具栏(toolbox)

提供导出图片，数据视图，动态类型切换，数据区域缩放，重置五个功能。

toolbox: {
        feature: {
          saveAsImage: {},
          dataZoom: {
            yAxisIndex: false // 默认是0
          },
          restore: {}
        }
},

区域缩放(dataZoom)

echarts提供了区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

dataZoom: [{
        show: true,
        start: 0, // 起始位置
        end: 50 // 结束位置
}],

提示框(tooltip)

tooltip: {
   show: true
},

定位(grid)

ECharts大多数组件都提供了定位属性，我们可以采用类似 CSS absolute 的定位属性来控制组件的位置

   grid: {
      top: 150,
      left: '10%',
      right: '10%',
      bottom: 150
  },

综合上面的组件可以看到下面效果

const chartDom = document.getElementById('chart');
    const chart = echarts.init(chartDom);

    chart.setOption({
      dataset: {
        source: [
          ['衬衫', 99, 90, '抖音', 50],
          ['羊毛衫', 78, 88, '拼多多', 50],
          ['雪纺衫', 20, 30, '京东', 50],
          ['裤子', 130, 45, '淘宝', 50],
          ['高跟鞋', 89, 98],
          ['袜子', 65, 77]
        ]
      },
      title: {
        text: 'ECharts 学习',
        subtext: '这里是副标题'
      },
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},

      // 图例
      legend: {
        data: [{
          name: '饼图',
          icon: 'circle',
          textStyle: {
            color: 'red'
          }
        }, '折线图', '柱状图'],
        left: 300,
      },
      grid: {
        top: 100,
        left: '10%',
        right: '10%',
        bottom: 100
      },
      // 工具栏
      toolbox: {
        feature: {
          saveAsImage: {},
          dataZoom: {
            yAxisIndex: false // 默认是0
          },
          restore: {}
        }
      },
      // 区域缩放
      dataZoom: [{
        show: true,
        start: 0,
        end: 2
      }],
      // 提示框
      tooltip: {
        show: true
      },

      // 定位
      grid: {
      top: 150,
      left: '10%',
      right: '10%',
      bottom: 150
      },
      series: [{
          name: '饼图',
          type: 'pie',
          center: ['65%', 80],
          radius: 35,
          encode: {
            itemName: 3,
            value: 4
          }
        },
        {
          name: '折线图',
          type: 'line',
          encode: {
            x: 0,
            y: 1
          }

        }, {
          name: '柱状图',
          type: 'bar',
          encode: {
            x: 0,
            y: 2
          }

        }
      ]
    });