vue配合echarts简单进行数据可视化开发02-一一网

一、通用配置

基于第一篇笔记的案例，下面我们来介绍echarts中的一些通用配置。

title：标题组件

title是echarts图标的通用的配置，其中title对象中好包含text属性，textStyle属性用来设置title的文本和文本的颜色。其中borderWidth设置标题的边框的宽度，borderColor设置边框的颜色，borderRadius设置边框的圆角数值。还有的就是left、top来设置标题的位置。

tooltip：提示框组件
- trigger：‘item’ | ‘axis’，前者表示数据触发，后者表示坐标轴触发；
- triggerOn：触发时机，mouseover | click
- formatter：格式化，字符串模板 | 回调函数 =》自定义提示模板。
  
  formatter中字符串模板可以根据图表的类型去查询文档来处理，对于定制型比较高的tip，可以采用回调函数的形式去制作。回调函数中有一个arg参数，这里保存着丰富的数据，可以根据这些数据，制作出你想要的任何类型的tip。
```
formatter: function(arg){
  return arg[0].name + '的分数是：'+arg[0].data;
}
复制代码
```
toolbox：工具栏组件
- feature：配置toolbox的功能；
  - saveAsImage：导出图片的功能。
  - dataView：数据视图的功能。
  - restore：重置的功能。
  - dataZoom：区域缩放的功能
  - magicType：图表之间进行切换的功能。
legend：图例组件，用于筛选系列，需要和series配合使用；
- data：legend中有一个data数组，这个数组就是存放图例的，legend中的data的值需要和series数组中的name值保持一致。

对于通用配置，就是指任何一种类型的图标都可以使用的配置，还会经常需要使用到，所以很重要。title、tooltip、toolbox、legend

二、折线图实现

<template>
    <div>
        <div id="main1"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
    export default {
        data() {
            return {
                
            }
        },
        mounted() {
            //初始化echarts对象
            let myecharts = echarts.init(document.getElementById('main1'));
            //类目数据，就是主轴坐标的数据
            let xData = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
            let data = [255,421,635,582,425,852,354];
            let data2 = [552,751,935,482,725,952,454];
            const option = {
              // x轴设置
              xAxis:{
                type: 'category',
                data: xData,
                 //紧挨边缘
                boundaryGap: true
              },
              // Y轴设置
              yAxis: {
                type: 'value',
                //灵活设置折线图的起始点和结束点 ==> 脱离0值比例
                scale: true
              },
              //图例租界，和series中的name值相对应
              legend:{
                backgroundColor: 'rgba(142,212,12,1)'
                ,borderColor: 'red'
              },
              //提示框组件
                tooltip: {
                  trigger: 'item',
                  //formatter是格式化的，可以是回调函数或者自定义数据
                  formatter: ""
                },
              // 系列，表示这个图标的类型等核心设置
              series: [
                {
                name: '酸豆角',
                type: 'line',
                data: data,
                //标记点最大最小值
                markPoint:{
                  data: [
                    {
                      type: 'max'
                    },{
                      type: 'min'
                    }
                  ]
                },
                //平均值
                markLine: {
                  data: [
                    {
                      type: 'average'
                    }
                  ]
                },

                //标注区间
                markArea: {
                  data: [
                    [
                      {
                        xAxis: '星期二'
                      },
                      {
                        xAxis: '星期三'
                      }
                    ],
                    [
                      {
                        xAxis: '星期五'
                      },{
                        xAxis: '星期日'
                      }
                    ]
                  ]
                },
                //改变折线的平滑度
                smooth: true,
                //线条样式设置
                lineStyle: {
                  type: 'dashed',
                  color: 'green',
                },
                //折线图填充风格
                areaStyle: {
                  color: 'rgba(24,154,135,.5)'
                },
                 //设置为推叠图，使其不重叠，不凌乱
                  stack: true
                
              },{
                  type: 'line',
                  data: data2,
                  name: '韭菜花',
                  smooth: true,
                  //设置为推叠图，使其不重叠，不凌乱
                  stack: true,
                  //填充
                  areaStyle:{}
              }]
              
            }
            myecharts.setOption(option);
            
    },
  }
</script>

<style scoped>
    #main1{
        width: 500px;
        height: 400px;
    }
</style>
复制代码