echarts学习笔记

echarts学习笔记

因为所做项目中用到了echarts表，所以在空余的时间简单的了解了一下echarts表

ECharts 中的样式简介

这里介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。

颜色主题（Theme）
调色盘
直接样式设置（itemStyle、lineStyle、areaStyle、label、...）
视觉映射（visualMap）

Theme：ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 ‘light’ 和 ‘dark’。
例如：可以这么来使用它们：var chart = echarts.init(dom, 'light');
调色盘：调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。 可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

option = {
    // 全局调色盘。
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

    series: [{
        type: 'bar',
        // 此系列自己的调色盘。
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // 此系列自己的调色盘。
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

itemStyle, lineStyle, areaStyle, label：这些可以设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式。
高亮的样式：emphasis：在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 emphasis 属性来定制。emphsis 中的结构，和普通样式的结构相同。

echarts显示类型（type）

一般使用一下四种图的较多：

bar：柱状图
line：折线图
pie：饼图
scatter：散点图

另：如果需要在图中显示多条线段，只需要在series中写入多条数据即可。
也可以在tooltip中实现多种图形的切换