echarts（一）下载引入，调色盘，[标题、图例组件、坐标轴]

一个简单的例子

1. 下载并引入
（1）npm install echarts --save
（2）import echarts from 'echarts' //main.js引入echarts
或者在组件中按需引入，查看按需引入的详细模块

<script>
	// 引入 ECharts 主模块
	var echarts = require('echarts/lib/echarts');
	// 引入柱状图
	require('echarts/lib/chart/bar');
	// 引入提示框和标题组件
	require('echarts/lib/component/tooltip');
	require('echarts/lib/component/title');
	export default{}
</script>

2. 主要代码 在线编辑

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>

methods:{
	drawMap(){
		// 基于准备好的dom，初始化echarts实例
		var myChart = 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);
      	//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener('resize',function() {myChart.resize()});
	}
},
mounted(){
	this.drawMap();
}

为了适应屏幕放大缩小，添加一个浏览器窗口变化的事件

//1. 写法一：当只有一个图表时，可以直接写
// window.onresize = lineChart.resize;

// 2. 写法二：原生写法
// window.addEventListener("resize", () =>{
//   this.barChart.resize();
//   this.lineChart.resize();
// });

//3. 写法三：jquery的写法
$(window).on("resize", function(){
  this.barChart.resize();
  this.lineChart.resize();
})

调色盘

在 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'],
        ...
    }]
}

可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

直接的样式设置

直接的样式设置是比较常用设置方式。在 ECharts 的 option 中，很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。可以在线编辑简单的图标
这里列出常用的，详细见官网、

直接写在 setOption 中的（即在var option = {} 的对象中）有：
一、title
二、lengend
三、grid
四、xAxis
五、yAxis

一、标题title 官方文档

1. title.text
默认为 ""，主标题文本，支持使用 \n 换行；

2. title.link
默认为 ""，主标题的文本超链接；

3. title.target
默认为 "blank"，指定窗口打开主标题超链接；
（1）'self' 当前窗口打开；
（2）'blank' 新窗口打开；

4. title.textStyle
（1）title.textStyle.color，主标题文字的颜色，[default:'#333']；

（2）title.textStyle.fontStyle，主标题文字字体的风格，[default:'normal']；

• 'normal'、'italic'、'oblique'

（3）title.textStyle.fontWeight，主标题文字字体的粗细，[default:'normal']；

• 'normal'、'bold'、'bolder'、'lighter'、100 | 200 | 300 | 400...

（4）title.textStyle.fontFamily，主标题文字的字体系列，[ default: 'sans-serif' ]；
还可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …

（5）title.textStyle.fontSize，主标题文字的字体大小，[ default: 18 ]；

（6）title.textStyle.lineHeight，主标题文字的字体行高，[ default: 18 ]；
rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。

{
    lineHeight: 56,
    rich: {
        a: {
            // 没有设置 `lineHeight`，则 `lineHeight` 为 56
        }
    }
}

（7）title.textStyle.width，文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 backgroundColor）时，可能会使用它；

注意，如果不定义 rich 属性，则不能指定 width 和 height。

（8）title.textStyle.height ，文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 backgroundColor）时，可能会使用它；

（9）title.textStyle.rich，在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。

5. title.textAlign
整体（包括 text 和 subtext）的水平对齐，默认 [default:'auto'] ，可选值： ‘auto’、‘left’、‘right’、‘center’；

6. title.textVerticalAlign
整体（包括 text 和 subtext）的垂直对齐，默认 [default:'auto'] ，可选值：‘auto’、‘top’、‘bottom’、‘middle’。；

7. title.padding
标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，默认 [ default: 5 ]。

padding: 5 //设置内边距为 5
padding: [5, 10] // 设置上下的内边距为 5，左右的内边距为 10
padding: [5,4,5,4] （顺时针上，右，下，左）

8. title.borderColor
标题的边框颜色。支持的颜色格式同 backgroundColor，默认 [ default: '#ccc' ]。

9. title.borderWidth
标题的边框线宽。支持的颜色格式同 backgroundColor，默认 [ default: 0 ]。

10. title.borderRadius
圆角半径，单位px，支持传入数组分别指定 4 个圆角半径，默认 [ default: 0 ]。

borderRadius: 5, // 统一设置四个角的圆角大小
borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）

---

二、图例组件legend 官方文档

1. legend.left
图例组件离容器左侧的距离，默认 [ default: 'auto' ]。
（1）值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。
（2）如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。

2. legend.top
图例组件离容器上侧的距离，默认 [ default: 'auto' ]；

legend.right 和 legend.bottom 同上

3. legend.width
图例组件的宽度。默认自适应，默认 [ default: 'auto' ]；（string,number）

4. legend.height
图例组件的高度。默认自适应，默认 [ default: 'auto' ]；

5. legend.orient
图例列表的布局朝向，默认 [ default: 'horizontal' ]；

6. legend.align
图例标记和文本的对齐（即颜色块和文字的位置）。默认自动，默认 [ default: 'auto' ]；

7. legend.padding
图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。默认 [ default:5]；

8. legend.itemGap
图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔，默认 [ default: 10 ]；

9. legend.itemWidth
图例标记的图形宽度。默认 [ default: 25 ]；

10. legend.itemHeight
图例标记的图形高度。默认 [ default: 14 ]；

11. legend.textStyle 图例的公用文本样式。
（1）legend.textStyle.color，文字的颜色，默认 [ default: #333 ]；

（2）legend.textStyle.fontStyle，文字字体的风格，默认 [ default: 'normal' ]；
可选： normal，italic，oblique

（3）legend.textStyle.fontWeight，文字字体的粗细，默认 [ default: normal ]；
（4）legend.textStyle.fontFamily，文字的字体系列，默认 [ default: 'sans-serif']；
（5）legend.textStyle.fontSize，文字的字体大小，默认 [ default: 12 ]；
（6）legend.textStyle.lineHeight，文字的行高；

12. legend.data
图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name；

13. legend.tooltip
图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name

14. legend.icon
图例项的文字提示。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip。类似文字溢出出现省略号；

legend: {
    formatter: function (name) {
        return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
    },
    tooltip: {
        show: true
    }
}

---

三、grid 官方文档

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。

1. grid.left
grid 组件离容器左侧的距离。默认：[ default: '10%' ]；

2. grid.top
grid 组件离容器上侧的距离。默认：[ default: '10%'60 ]；

3. grid.right
grid 组件离容器右侧的距离。默认：[ default: '10%' ]；

4. grid.bottom
grid 组件离容器下侧的距离。默认：[ default: 60 ]；

5. grid.width
grid 组件的宽度，默认自适应。默认：[ default: 'auto' ]；

6. grid.height
grid 组件的高度，默认自适应。默认：[ default: 'auto' ]；

7. grid.backgroundColor
网格背景色，默认透明。默认：[ default:'transparent' ]；
注意： 此配置项生效的前提是，设置了 show: true。

8. grid.borderColor
网格的边框颜色。支持的颜色格式同 backgroundColor。默认：[ default: '#ccc' ]；
注意： 此配置项生效的前提是，设置了 show: true。

9. grid.borderWidth
网格的边框线宽。默认：[ default: 1 ]；
注意： 此配置项生效的前提是，设置了 show: true。

---

四、直角坐标系 grid 中的 x 轴，xAxis 官方文档

1. xAxis.type
坐标轴类型。默认 [ default: 'category' ]；
（1）'value'， 数值轴，适用于连续数据。
（2）'category'， 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
（3）'time'， 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
（3）'log'， 对数轴。适用于对数数据。

2. xAxis.name
坐标轴命名名称；

3. xAxis.nameLocation
坐标轴命名名称显示位置。默认 [ default: 'end' ]；
可选： start、middle/center、end

4. xAxis.nameTextStyle
坐标轴命名名称的文字样式。
（1）'xAxis.nameTextStyle.color'，坐标轴名称的颜色。

（2）'xAxis.nameTextStyle.fontStyle'，坐标轴名称文字字体的风格，默认： [ default: 'normal' ]，可选normal、italic、oblique；

（3）'xAxis.nameTextStyle.fontWeight'，坐标轴名称文字字体的粗细，默认： [ default: 'normal' ]，可选normal、bold、bolder、lighter、100/200/300…；

（4）'xAxis.nameTextStyle.fontFamily'，坐标轴名称文字的字体系列，默认： [ default: 'sans-serif' ]。

（5）'xAxis.nameTextStyle.fontSiz'，坐标轴名称文字的字体大小，默认： [ default: 12]。

（6）'xAxis.nameTextStyle.align'，文字水平对齐方式，默认自动，可选： left、center、right。

（7）'xAxis.nameTextStyle.verticalAlign'，文字垂直对齐方式，默认自动，可选： top、middle、bottom。

（8）'xAxis.nameTextStyle.lineHeight'，行高。

5. xAxis.nameGap
坐标轴名称与轴线之间的距离，默认： [ default: 15 ]。

6. xAxis.boundaryGap
坐标轴两边留白策略（即图标是否占满整个坐标轴）
（1）类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true；
（2）非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围

7. xAxis.min
坐标轴刻度最小值，默认： [ default: null ]。

8. xAxis.max
坐标轴刻度最小值，默认： [ default: null ]。

9. xAxis.axisLine

10. xAxis.axisTick

11. xAxis.axisLabel

12. xAxis.splitLine

---

五、直角坐标系 grid 中的 y 轴，yAxis 官方文档

1. yAxis.position
y轴的位置，可选 left、right。

2. yAxis.type
坐标轴类型，默认： [ default: value ]，可选： value（数值轴，适用于连续数据）、category（类目轴）、time（ 时间轴，适用于连续的时序数据）、log（对数轴。适用于对数数据）。

3. yAxis.name
坐标轴名称。

4. yAxis.nameLocation
坐标轴名称显示位置，默认： [ default: 'end' ]，可选 start、 middle/center、end。

5. yAxis.nameTextStyle
坐标轴名称的文字样式，与 x 轴类似，这里就不多描述了。

6. yAxis.nameGap
坐标轴名称与轴线之间的距离，默认： [ default: 15 ]。