Echart 属性解析

<template>
    <div class="container">
      <div id="myEchart" style="height: 800px"></div>
    </div>
</template>

<script>
  import echarts from 'echarts'
  import echartChina from './mixin/echartChina.js'
  export default {
    name: 'text',
    data () {
      return {
        mapData: [
          {name: '北京',value: '555'},
          {name: '天津',value: '1000'},
          {name: '上海',value: '100'},
          {name: '重庆',value: '100'},
          {name: '河北',value: '600'},
          {name: '河南',value: '400'},
          {name: '云南',value: '350'},
          {name: '辽宁',value: '70'},
          {name: '黑龙江',value: '750'},
          {name: '湖南',value: '10'},
          {name: '安徽',value: '300'},
          {name: '山东',value: '10'},
          {name: '新疆',value: '400'},
          {name: '江苏',value: '80'},
          {name: '浙江',value: '160'},
          {name: '江西',value: '150'},
          {name: '湖北',value: '650'},
          {name: '广西',value: '200'},
          {name: '甘肃',value: '180'},
          {name: '山西',value: '666'},
          {name: '内蒙古',value: '120'},
          {name: '陕西',value: '222'},
          {name: '吉林',value: '520'},
          {name: '福建',value: '220'},
          {name: '贵州',value: '900'},
          {name: '广东',value: '500'},
          {name: '青海',value: '500'},
          {name: '西藏',value: '800'},
          {name: '四川',value: '700'},
          {name: '宁夏',value: '10'},
          {name: '海南',value: '590'},
          {name: '台湾',value: '780'},
          {name: '香港',value: '850'},
          {name: '澳门',value: '999'},
          {name: '南海诸岛',value: '700'}
        ]
      }
    },
    mounted () {
      let myChartChina = this.$echarts.init( document.getElementById('fzyChartChina'))
      let option = {
        backgroundColor: '#fff',//背景色
        // *********** title 标题 ***************
        title: {
          x: 'left',//水平定位位置，默认 left. 可选 'center','right','left','number(单位为px)'
          y: 'top',//垂直定位位置，默认为 top. 可选 'top','bottom','center','number(单位为px)'
          backgroundColor: '#fff',
          borderColor: '#ccc',//边框颜色
          borderWidth: '0',//边框线宽度 单位px
          itemGap: '',//祝福标题纵向间隔单位为 px
          text: '主标题',
          textStyle: {//主题样式
            color: '#fff'
          },
          subtext: '副标题',
          subtextStyle: {
            color: '#fff'//副标题样式
          }
        },
        //*********** legend 图例 *************
        legend: {
          type: 'plain',//图例类型，默认 plain,可选值 'scroll'
          orient: 'horizontal',//布局方式，默认 为 'horizontal'，可选 ‘vertical’
          top: '1%',//图例相对容器位置，类似的还有 bottom/left/right
          x: 'right',
          itemGap: '10',//各个item之间的间隔，单位为px
          itemWidth: '20',//图例图形宽带
          itemHeight: '14',//图形高度
          selected: {
            '销量': true,
          },
          textStyle: {//内容样式
           color: '#fff'
          }
        },
        //******* dataRange 值域 *********
        dataRange: {
          orient: 'vertical',             // 布局方式，默认为垂直布局，可选为：'horizontal' ¦ 'vertical'
          x: 'left',                     // 水平安放位置，默认为全图左对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          y: 'bottom',                  // 垂直安放位置，默认为全图底部，可选为： 'top' ¦ 'bottom' ¦ 'center'¦ {number}（y坐标，单位px）
          backgroundColor: 'rgba(0,0,0,0)',
          borderColor: '#ccc',             // 值域边框颜色
          borderWidth: 0,                 // 值域边框线宽，单位px，默认为0（无边框）
          padding: 5,                    // 值域内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
          // 横向布局时为水平间隔，纵向布局时为纵向间隔
          itemWidth: 20,             // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
          itemHeight: 14,            // 值域图形高度，线性渐变垂直布局高度为该值 * 10
          splitNumber: 5,            // 分割段数，默认为5，为0时为线性渐变
          color:['#1e90ff','#f0ffff'],//颜色
          //text:['高','低'],              // 文本，默认为数值文本
          textStyle: {
            color: '#333'                                // 值域文字颜色
          }
        },
        //******** tooltip 提示框  *****
        tooltip: {
          trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
          showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
          hideDelay: 100,            // 隐藏延迟，单位ms
          transitionDuration : 0.4,         // 动画变换时间，单位s
          backgroundColor: 'rgba(0,0,0,0.7)',  // 提示背景颜色，默认为透明度为0.7的黑色
          borderColor: '#333',            // 提示边框颜色
          borderRadius: 4,                // 提示边框圆角，单位px，默认为4
          borderWidth: 0,                // 提示边框线宽，单位px，默认为0（无边框）
          padding: 5,                   // 提示内边距，单位px，默认各方向内边距为5，
          // 接受数组分别设定上右下左边距，同css
          axisPointer : {                 // 坐标轴指示器，坐标轴触发有效
            type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
            lineStyle : {          // 直线指示器样式设置
              color: '#48b',
              width: 2,
              type: 'solid'
            },
            shadowStyle : {              // 阴影指示器样式设置
              width: 'auto',         // 阴影大小
              color: 'rgba(150,150,150,0.3)'  // 阴影颜色
            }
          },
          textStyle: {
            color: '#fff'
          },
          formatter:'{b}-销售数量：{c}'  //提示内容
        },
        // ********* grid 网格 ********
        grid: {
          x: 80,
          y: 60,
          x2: 80,
          y2: 60,
          // width: {totalWidth} - x - x2,
          // height: {totalHeight} - y - y2,
          backgroundColor: 'rgba(0,0,0,0)',
          borderWidth: 1,
          borderColor: '#ccc'
        },
        //是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
        visualMap: {
          min: 0, //最小值
          max: 1000, //最大值
          left: 'left',
          top: 'bottom',
          calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
          inRange: {
            // color: ['#6BB7D9', '#ABC36C', '#E0CF18','#E5CC0F', '#C76646'] //颜色
            color: ['#DAFAFC', '#73B8EE', '#0873DE']
          },
          textStyle: {
            color: '#fff'
          },
          dimension: 0
        },
        //-------------   x轴   -------------------
        xAxis: {
          show:true,                  //---是否显示
          position:'bottom',          //---x轴位置
          offset:0,                   //---x轴相对于默认位置的偏移
          type:'category',            //---轴类型，默认'category'
          name:'月份',              //---轴名称
          nameLocation:'end',         //---轴名称相对位置
          nameTextStyle:{             //---坐标轴名称样式
            color:"#fff",
            padding:[5,0,0,-5], //---坐标轴名称相对位置
          },
          nameGap:15,                 //---坐标轴名称与轴线之间的距离
          //nameRotate:270,           //---坐标轴名字旋转
          axisLine:{                  //---坐标轴 轴线
            show:true,                  //---是否显示
            //-----箭头 -----
            symbol:['none', 'arrow'],   //---是否显示轴线箭头
            symbolSize:[8, 8] ,         //---箭头大小
            symbolOffset:[0,7],         //---箭头位置
            //----- 线 -----
            lineStyle:{
              color:'#fff',
              width:1,
              type:'solid',
            },
          },
          axisTick:{                  //---坐标轴 刻度
            show:true,                  //---是否显示
            inside:true,                //---是否朝内
            lengt:3,                    //---长度
            lineStyle:{
              //color:'red',          //---默认取轴线的颜色
              width:1,
              type:'solid',
            },
          },
          axisLabel:{                 //---坐标轴 标签
            show:true,                  //---是否显示
            inside:false,               //---是否朝内
            rotate:0,                   //---旋转角度
            margin: 5,                  //---刻度标签与轴线之间的距离
            //color:'red',              //---默认取轴线的颜色
          },
          splitLine:{                 //---grid 区域中的分隔线
            show:false,                 //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
            lineStyle:{
              //color:'red',
              //width:1,
              //type:'solid',
            },
          },
          splitArea:{                 //--网格区域
            show:false,                 //---是否显示，默认false
          },
          data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//内容
        },
        //--------------  y轴   -------------------
        yAxis: {
          show:true,                  //---是否显示
          position:'left',            //---y轴位置
          offset:0,                   //---y轴相对于默认位置的偏移
          type:'value',           //---轴类型，默认'category'
          name:'销量',              //---轴名称
          nameLocation:'end',         //---轴名称相对位置value
          nameTextStyle:{             //---坐标轴名称样式
            color:"#fff",
            padding:[5,0,0,5],  //---坐标轴名称相对位置
          },
          nameGap:15,                 //---坐标轴名称与轴线之间的距离
          //nameRotate:270,           //---坐标轴名字旋转
          axisLine:{                  //---坐标轴 轴线
            show:true,                  //---是否显示
            //------ 箭头 ------
            symbol:['none', 'arrow'],   //---是否显示轴线箭头
            symbolSize:[8, 8] ,         //---箭头大小
            symbolOffset:[0,7],         //---箭头位置
            //------ 线 ------
            lineStyle:{
              color:'#fff',
              width:1,
              type:'solid',
            },
          },
          axisTick:{                  //---坐标轴 刻度
            show:true,                  //---是否显示
            inside:true,                //---是否朝内
            lengt:3,                    //---长度
            lineStyle:{
              //color:'red',          //---默认取轴线的颜色
              width:1,
              type:'solid',
            },
          },
          axisLabel:{                 //---坐标轴 标签
            show:true,                  //---是否显示
            inside:false,               //---是否朝内
            rotate:0,                   //---旋转角度
            margin: 8,                  //---刻度标签与轴线之间的距离
            //color:'red',              //---默认取轴线的颜色
          },
          splitLine:{                 //---grid 区域中的分隔线
            show:true,                  //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
            lineStyle:{
              color:'#666',
              width:1,
              type:'dashed',          //---类型
            },
          },
          splitArea:{                 //--网格区域
            show:false,                 //---是否显示，默认false
          }
        },
        series:[
          {
            z: 1,
            name:'地图',
            type: 'map',  //地图种类
            map: 'china', //地图类型。
            left: '10',   //定位位置 left、right、top、bottom
            right: '30%',
            top: 20,
            bottom: '40%',
            zoom:0.75,//放大比例
            itemStyle: { //地图区域的多边形 图形样式。
              normal: {
                borderColor: '#ccc',//边框颜色
                borderWidth: 1,
                label: {
                  show: true,
                  textStyle: {
                    color: '#fff'//文字显示颜色
                  }
                }
              },
              emphasis:{ //高亮状态下的样试
                label:{
                  show:true,
                }
              }
            },
            label: {  //图形上的文本标签，可用于说明图形的一些数据信息
              show:true,
            },
            data: this.mapData,
          },
          {
            z: 2,
            name:'柱状图',
            type: 'bar',  //图形类型
            data: [],
            itemStyle: { //地图区域的多边形 图形样式。
              emphasis: {
                color: "rgb(254,153,78)"
              }
            },
            label: {
              show:true,
            },
          },
          {
            z: 3,
            name: '扇形图',
            type: 'pie',
            radius: ['23%', '30%'],//第一个数为内圈的宽度、第二个为外圈的宽度
            center: ['30%', '75%'],//定位位置  第一个数为水平方向、第二个数为垂直方向
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  }
</script>

<style scoped>

</style>