Echarts 基本使用

常见的数据可视化库：

• D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
• ECharts.js 百度出品的一个开源 Javascript 数据可视化库
• Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
• AntV 蚂蚁金服全新一代数据可视化解决方案 等等
• Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

介绍

• 是一个JS插件

• 性能好可流畅运行PC与移动设备

• 兼容主流浏览器

• 提供很多常用图表，且可定制。

  • 折线图、柱状图、散点图、饼图、K线图

• 官网地址：https://www.echartsjs.com/zh/index.html

 

下载

https://github.com/apache/incubator-echarts/tree/4.5.0

 

基本使用

1. 引入echarts 插件文件到html页面中
2. 准备一个具备大小的DOM容器

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

3. 初始化echarts实例对象

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

4. 指定配置项和数据(option)
   可以在官网的实例中找和自己想要的图形相似的实例，把option复制，然后根据需要进行修改

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

5. 将配置项设置给echarts实例对象

myChart.setOption(option);

 

基础配置

需要了解的主要配置：color title legend tooltip grid xAxis yAxis series

• color：调色盘颜色列表
• title：标题组件
• legend：图例组件
• tooltip：提示框组件
• toolbox：工具栏
• grid：直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴
• xAxis：直角坐标系 grid 中的 x 轴
  • boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
• yAxis：直角坐标系 grid 中的 y 轴
• series：系列列表，每个系列通过 type 决定自己的图表类型

 

以下的代码和图片不相符，只是为了演示

线条 / 板块颜色

// 注意是个数组
color: ['pink', 'red', 'green', 'skyblue'],

 

标题

title: {
    text: '全国累计趋势',
    textStyle: {
    	// 标题颜色
        color: '#fff',
    }
},

 

提示组件

tooltip: {
    // 触发方式
    trigger: 'axis',   // 鼠标放在图形上会出现数据信息 
    // 坐标轴指示器，坐标轴触发有效
    axisPointer: {      
        // 默认为直线，可选为：'line' | 'shadow'  
        // 折线图：line 
        // 柱形图：shadow 柱形周围会出现阴影
        type: 'shadow'        
    }
},

 

图例组件

// 想要改变文字前面图标的颜色，需要在series中改
legend: {
	// series里面有了 name值则 legend里面的data可以删掉
	top: '8%',   // 还可以设置离left、right、bottom的距离
    textStyle: {
    	color: '#fff',
    	fontSize: 10,
    }
},

 

网格配置

grid可以控制线形图 柱状图 图表大小

grid: {
	// 距离左边、右边、下面的距离，相当于margin
    left: '3%',
    right: '4%',
    bottom: '3%',
    // 是否显示刻度标签 如果是true 就显示 否则反之
    containLabel: true
},

 

工具箱组件

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
不常用，详情到https://echarts.apache.org/zh/option.html#toolbox了解

toolbox: {
},

 

xAxis

x轴的相关配置

xAxis: {
    type: 'category',
    // 是否让我们的线条和坐标轴有缝隙
    boundaryGap: false,
    // x坐标刻度标签
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    // x 轴文字标签样式
	axisLabel: {
        color: "rgba(255,255,255,1)",
        fontSize: "12"
    },
    // x 轴线条样式
    axisLine: {
	    lineStyle: {
 			color: "rgba(255,255,255,1)",
		}
 	}
},

 

yAxis

设置y轴的相关配置

yAxis: {
    type: 'value',
     // y 轴文字标签样式
    axisLabel: {
        color: "rgba(255,255,255,1)",
        fontSize: "12"
    },
    // y轴线条样式
    axisLine: {
        lineStyle: {
            color: "rgba(255,255,255,1)",
        }
    },
    // y 轴分隔线样式
    splitLine: {
        lineStyle: {
            color: "rgba(255,255,255,.3)"
        }
    }
},

 

series 系列图表配置

type决定着显示那种类型的图表

折线图 line

series: [
	// 这一个大括号为一个系列，也就是一条折线
    {
        name: '累计确诊',
        // 折线图
        type: 'line',
        symbol: "circle",  // 默认拐点是空心圆（中间是白色的），改成实心圆
        itemStyle: {
	        normal: {
	            color: "#ba3431",  // 会设置点和线的颜色
	            borderColor: '#fff',
	            borderWidth: '.5'
	       }
        },
        data: [120, 132, 101, 134, 90, 230, 210]
    },
	......
]

没有配置symbol: "circle"时，默认图例和拐点中心都是白色的

配置symbol: "circle"和itemStyle后，可以根据自己的需求调整样式

 

柱形图

series: [
    {
      name: '直接访问',
      type: 'bar',
      barWidth: '60%',  // 柱形宽度
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]