echarts学习总结

一、新建一个简单的Echarts

1、首先新建一个vue2的项目，项目中安装Echarts

cnpm install echarts --save

 2、新建一个ref

<template>
    <div ref="myecharts" id="myecharts"></div>
</template>

 3、引入echarts

<script>
  import * as echarts from 'echarts';
  export default {
    mounted() {
      let myEcharts = echarts.init(this.$refs.myecharts)
      myEcharts.setOption({
        title: {
          text: 'helloword'
        },
        xAxis: {
          data: [
            {value:'李玉',age:'21'},
            {value:'简隋英',age:'23'},
            {value:'江停',age:'24'},
            {value:'严峫',age:'23'}
          ]
        },
        yAxis: {
  
        },
        series: [
          {
            name:'男主',
            type: 'bar',
            data:[21, 23, 24,23]
          }
        ]
      })
    }
  }
  </script>

4、设置#myecharts的样式

  <style scoped>
  #myecharts {
    width: 500px;
    height: 500px;
    border: 1px solid red;
  }
  </style>

 5、执行npm run dev显示如下：

二、title标题组件，包含主标题和副标题。

三、tooltip提示框组件

四、 legend图例组件

 五、柱状图

1、基本设置

1、新建一个ref

<template>
    <div ref="myecharts" id="myecharts"></div>
</template>

 2、引入echarts

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myecharts)
    let xData = ['李玉', '简隋英', '江停', '严峫']
    let yData = [21, 23, 24, 23]
    let option = {
      title: {
        text: '小说人物'
      },
      xAxis: {
        data: xData,
        type:'category',//坐标轴类型，value数据轴，category类目轴
      },
      yAxis: {

      },
      series: [
        {
          name: '男主',
          type: 'bar',//系列类
          data: yData
        }
      ]
    }
    myEcharts.setOption(option)
  }
}
</script>

3、设置#myecharts的样式

  <style scoped>
  #myecharts {
    width: 500px;
    height: 500px;
    border: 1px solid red;
  }
  </style>

 4、执行npm run dev显示如下：

2、设置最大值和最小值

注意：在 series : [ { markPoint :  { ... } } ]

• 代码截图 

• 代码编写

markPoint: {
  data: [
    {
      type: 'max',
      name: '最大值'
    }, 
    {
      type: 'min',
      name: '最小值'
    }
  ]
}

•  npm run dev运行效果

 

3、设置平均值

 注意：在 series : [ { markLine :  { ... } } ]

•  代码截图

• 代码

markLine:{
  data:[
    {
      type:'average',
      name:'平均值'
    }
  ]
},

•   npm run dev运行效果

六、水平柱状图

 1、基本设置

注意：将xAxis和yAxis设置交换即可

•   代码截图

•  代码编写

xAxis: {
  type:'value'
},
yAxis: {
  data: xData,
  type: 'category',//坐标轴类型，value数据轴，category类目轴
},

•  npm run dev运行效果 

2、设置轴的宽度

注意：series : [ { barWidth :  ... } ] 

• 代码截图

• 代码编写

barWidth:20,

• npm run dev运行效果  

3、设置整体轴的颜色

 注意：series : [ { color :  ... } ] 

• 代码截图

• 代码编写

color:'green',

•  npm run dev运行效果  

4、单独设置每个轴的颜色

注意： series : [ { itemStyle :  normal : { color : function (params) {...} } } ] 

• 代码截图

• 代码编写

itemStyle:{
  normal:{
    color:function(params){
      let colorList = [
        'red',
        'green',
        'pink',
        'yellow'
      ]
      return colorList[params.dataIndex]
    }
  }
},

• npm run dev运行效果  

七、饼状图 

1、 基本设置

注意：新建一个基本的饼图

• 新建一个ref 

• 代码： 

<div ref="bar" id="bar"></div>

• 设置id：bar的style，设置宽高不然不显示

• 代码： 

#bar{
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

• 引入echarts

• 代码：

import * as echarts from 'echarts';

• 在mounted里进行各种配置

• 代码：

 mounted() {
        let myEcharts = echarts.init(this.$refs.bar)
        let data = [
            {value:33,name:'香蕉'},
            {value:31,name:'苹果'},
            {value:32,name:'葡萄'},
            {value:22,name:'荔枝'}
        ]
        let option = {
            title: {
                text: '饼状图',
                left: 'center'
            },
            series:[
                {
                    name: '统计',
                    type: 'pie',
                    data
                }
            ]
        }
        myEcharts.setOption(option)
    }

• 执行npm run dev

 

2、加一个图例 

注意：legend:{} 

• 代码：

legend:{},

•  执行npm run dev

3、设置纵向图例

注意：legend : { ... }, 

 

•  代码：

legend:{
    left:'left',
    orient: 'verical'
},

•  执行npm run dev

八、环形图

1、环形图基本配置

注意：series [ { radius : [ '' " ,'' " ] } ]

//设置饼图的半径，一项为内半径，第二项为外半径

 

• 代码：

//设置饼图的半径，一项为内半径，第二项为外半径
radius:['40%','70%'],

•  执行npm run dev 

2、隐藏文本标签

 注意：series [ { label : { show: false} } ]

• 代码： 

label:{
    show: false//默认值是true
}

• 执行npm run dev  

3、调整文本提示信息的位置

 

• 代码： 

label: {
    show: true,//默认值是true
    //  outsize：外展示，inside内展示，center中心展示
    position:'inside',
}

•  outsize：外展示

• inside内展示 

• center中心展示 （指向哪一个显示哪一个）

九、兰丁格尔玫瑰图

1、基本设置

注意：series [ { roseType :  'area'  } ]

 

•  代码：

roseType: 'area',

•  执行npm run dev 

2、设置图形阴影效果

 注意：series [ { itemStyle : { ... } } ]

• 代码：

itemStyle:{
    shadowBlur: 200,
    shadowColor: '#000'
}

•   执行npm run dev 

3、设置每块不同颜色

注意：在data里加itemstyle.normal.color 

• 代码：

let data = [
    { value: 33, name: '香蕉', itemStyle: { normal: { color: 'red' } } },
    { value: 31, name: '苹果', itemStyle: { normal: { color: 'blue' } } },
    { value: 32, name: '葡萄', itemStyle: { normal: { color: 'yellow' } } },
    { value: 22, name: '荔枝', itemStyle: { normal: { color: 'green' } } }
]

•   执行npm run dev 

 

十、折线图

1、基本设置

 注意：新建一个基本的折线图

• 新建一个ref 

• 代码： 

<div ref="line" id="line"></div>

• 设置id：line的style，设置宽高不然不显示

• 代码： 

#line {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

• 引入echarts

• 代码：

import * as echarts from 'echarts';

• 在mounted里进行各种配置

• 代码：

    mounted() {
        let myEcharts = echarts.init(this.$refs.line)
        let xData = ['星期一', '星期二', '星期三', '星期四', '星期五']
        let data = [130, 25, 30, 45, 100]
        let option = {
            xAxis: {
                type: 'category',
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    type: 'line',
                    data
                }
            ]
        }
        myEcharts.setOption(option)
    }

• 执行npm run dev

 

2、设置折线的平滑过度

 注意：series [ { smooth: true } ]

 

• 代码：

smooth: true

• 执行npm run dev

3、设置曲面下方颜色填充

 注意：series [ { areaStyle:{} } ]

• 代码：

areaStyle:{}

• 执行npm run dev 

4、设置最大值最小值

  注意：series [ { markPoint:{} } ]

 

• 代码： 

markPoint: {
    data: [
        { type: 'max', name: '最大值' },
        { type: 'min', name: '最小值' }
    ]
}

• 执行npm run dev 

5、设置平均值

 注意：series [ { markLine:{} } ]

•  代码： 

markLine: {
    data: [
        { type: 'average', name: '平均值' }
    ]
}

• 执行npm run dev  

 十一、多条折线图的设置

1、基本设置

  注意：新建一个基本的折线图

• 新建一个ref 

• 代码： 

<div ref="line" id="line"></div>

• 设置id：line的style，设置宽高不然不显示

• 代码： 

#line {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

• 引入echarts

• 代码：

import * as echarts from 'echarts';

• 在mounted里进行各种配置

• 代码：

    mounted() {
        let myEcharts = echarts.init(this.$refs.line)
        let xData = ['星期一', '星期二', '星期三', '星期四', '星期五']

        let dataA = [130, 25, 30, 45, 100]
        let dataB = [12, 54, 87, 56, 123]
        let dataC = [34, 44, 65, 123, 23]
        let dataD = [12, 65, 98, 121, 132]

        let option = {
            title:{
                text:'销量'
            },
            xAxis: {
                type: 'category',
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'香蕉',
                    type:'line',
                    stack:'num',
                    data:dataA
                },
                {
                    name:'苹果',
                    type:'line',
                    stack:'num',
                    data:dataB
                },
                {
                    name:'荔枝',
                    type:'line',
                    stack:'num',
                    data:dataC
                },
                {
                    name:'芒果',
                    type:'line',
                    stack:'num',
                    data:dataD
                },
            ]
        }
        myEcharts.setOption(option)
    }

• 执行npm run dev

 

2、设置多个曲面下方的颜色填充

 注意：在每一个里面设置areaStyle:{}

• 代码：

series: [
    {
        name:'香蕉',
        type:'line',
        stack:'num',
        data:dataA,
        areaStyle:{}
    },
    {
        name:'苹果',
        type:'line',
        stack:'num',
        data:dataB,
        areaStyle:{}
    },
    {
        name:'荔枝',
        type:'line',
        stack:'num',
        data:dataC,
        areaStyle:{}
    },
    {
        name:'芒果',
        type:'line',
        stack:'num',
        data:dataD,
        areaStyle:{}
    },
]

•  执行npm run dev

 

3、设置单个高亮效果

 注意：如果每一个都需要设置高亮效果，就将每一个系列都设置上

• 代码：

emphasis: {
    focus: 'series'
}

• 执行npm run dev 

十二、散点图

1、基本设置

 注意：新建一个基本的散点图

• 新建一个ref 

• 代码： 

<div ref="scatter" id="scatter"></div>

• 设置id：scatter的style，设置宽高不然不显示

• 代码： 

#scatter {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

• 引入echarts

• 代码：

import * as echarts from 'echarts';

• 在mounted里进行各种配置

• 代码：

    mounted() {
        let myEcharts = echarts.init(this.$refs.scatter)
        let option = {
            xAxis: {},
            yAxis: {},
            series: [
                {
                    data: [
                        [18.2, 6.83],
                        [6.32, 5.63],
                        [17.0, 6.55],
                        [8.18, 5.12],
                        [15.0, 7.56]
                    ],
                    type:'scatter',//散点图
                }

            ]
        }
        myEcharts.setOption(option)
    }

• 执行npm run dev

 

2、设置散点图大小

 注意：series [ { symbolSize : 数值 } ]

 

• 代码：

symbolSize: 50,

• 执行npm run dev  

3、设置图点整体颜色

 注意：series [ { color :' 色值'  } ]

• 代码：

color:'red'

• 执行npm run dev 

4、 设置图点渐变颜色

 注意：series [ { color :' 色值'  } ]

• 代码： 

color: {
    type: 'linear',//线性渐变
    x: 0,//相当于图形包围盒中的百分比
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
        {
            offset: 0,
            color: 'green'
        }, {
            offset: 1,
            color: 'rgba(255,233,9)'
        }
    ]
}

•  执行npm run dev  

5、鼠标移入高亮

 注意：series [ { emphasis : ... } ]

• 代码：

    emphasis: {
        itemStyle: {
            borderColor: 'rgba(100,200,50,0.5)',
            borderWidth: 30
        }
    },

•   执行npm run dev  

6、鼠标移入时显示提示框

 注意：tooltip:{},

• 代码：

tooltip:{},

•  执行npm run dev  

十三、grid属性

1、设置图形与外框的间距

注意：grid : { ... } 

• 代码：

grid:{
    left:'70px',
    right:'20%',
    top:'30px',
    bottom:'20%'
},

•    执行npm run dev  

2、图形边框线条颜色加深

注意：grid : { show : true } 

•  代码：

show:true,

• 执行npm run dev  

3、设置图形容器背景颜色

 注意：grid : { backgroundColor : ' 色值 ', } 

// 设置背景色时show:true，不然设置项不显示

• 代码：

grid: {
    show:true,
    backgroundColor:'yellow',
}

•  执行npm run dev  

3、 设置图形容器边框颜色

 注意：grid : { borderColor : ' 色值 ', } 

// 设置背景色时show:true，不然设置项不显示

• 代码：

borderColor:'red',

•   执行npm run dev  

十四、k线图

1、基本设置 

 注意：新建一个基本的k线图

• 新建一个ref 

• 代码： 

<div ref="candlestick" id="candlestick"></div>

• 设置id：candlestick的style，设置宽高不然不显示

• 代码： 

#candlestick {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

• 引入echarts

• 代码：

import * as echarts from 'echarts';

• 在mounted里进行各种配置

• 代码：

export default {
    mounted() {
        let myEcharts = echarts.init(this.$refs.candlestick)
        let option = {
            xAxis: {
                data: ['香蕉', '苹果', '葡萄', '荔枝', '芒果']
            },
            yAxis: {},
            series: [
                {
                    type: 'candlestick',
                    data: [
                        [20,34,10,38],
                        [40,35,30,50],
                        [31,38,33,44],
                        [38,15,5,42]
                    ]
                }
            ]
        }
        myEcharts.setOption(option)
    }
}

• 执行npm run dev

 

 2、设置提示内容

注意：tooltip : { ... }

• 代码：

tooltip: {
    trgger: 'axis',
    axisPointer: {
        type: 'cross'
    }
},

• 执行npm run dev

3、设置上涨颜色和下跌颜色 

 注意：上涨：series [ { itemStyle : { color :  ' 色值 ' } } ]

            下跌：series [ { itemStyle : { color0 :  ' 色值 ' } } ]

• 代码：

itemStyle: {
    color: 'blue',
    color0: 'yellow'
},

•  执行npm run dev

 4、设置上涨颜色和下跌边框颜色 

 注意：上涨：series [ { itemStyle : { borderColor :  ' 色值 ' } } ]

            下跌：series [ { itemStyle : { borderColor0 :  ' 色值 ' } } ]

 

• 代码：

itemStyle: {
    borderColor:'#000',
    borderColor0:'#000',
},

•  执行npm run dev

5、设置最大值最小值 平均值

注意：series [ { markPoint : { data :  [ ... ] } } ]

• 代码：

markPoint: {
    data: [
        {
            name: '最大值',
            type: 'max',
            valueDim: 'highest'//在那个维度上设置最发值或最小值
        },
        {
            name: '最小值',
            type: 'min',
            valueDim: 'lowest'
        },
        {
            name: '平均值',
            type: 'average',
            valueDim: 'close'
        }
    ]
},

•  执行npm run dev

十五、雷达图

1、基本设置

 注意：新建一个基本的雷达图

• 新建一个ref 

• 代码： 

 <div ref="radar" id="myRadar"></div>

• 设置id：myRadar的style，设置宽高不然不显示
• 代码： 

#myRadar {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

• 引入echarts

• 代码：

import * as echarts from 'echarts';

• 在mounted里进行各种配置

• 代码：

    mounted() {
        let myEcharts = echarts.init(this.$refs.radar)
        let option = {
            title: {
                title: '雷达图'
            },
            radar: [
                {
                    indicator: [
                        { name: '芒果', max: 6500 },
                        { name: '葡萄', max: 16000 },
                        { name: '香蕉', max: 30000 },
                        { name: '苹果', max: 52000 },
                        { name: '荔枝', max: 38000 }
                    ]
                }
            ],
            series: [
                {
                    type: 'radar',
                    data: [
                        {
                            value: [4300, 6400, 5400, 3400, 2300]
                        }
                    ]
                }
            ]
        }
        myEcharts.setOption(option)
    }

• 执行npm run dev

 

2、设置雷达图的形状

注意：radar : [ { shape :  'circle' } ]

• 代码：

shape: 'circle',

• 执行效果

3、设置雷达图半径

注意：radar : [ { radius : 大小 } ]

• 代码：

radius:100,

• 执行效果

4、旋转雷达图

注意：radar : [ { startAngle : 旋转度数 } ]

• 代码：

startAngle:200,

• 执行效果

5、设置内部层级 

 注意：radar : [ { splitNumber : 层数 } ]

• 代码：

splitNumber:10,

• 执行效果

6、设置指示器的颜色

 注意：

• 代码：

axisName: {
    formatter: '{value}',
    color: 'red'
},

• 执行效果

7、设置背景样式

• 代码：

splitArea:{
    areaStyle:{
        color:['green','yellow','pink','red','blue'],
        shadowColor:'0,0,0,0.2',
        shadowBlur:10
    }
},

• 执行效果

8、设置内部线段为虚线

 注意：

• 代码：

lineStyle: {
    type: 'dashed'
},

• 执行效果

 9、设置内容线段的包括颜色

  注意：

• 代码：

areaStyle:{
    color:'rgba(255,255,0,0.5)'
}

• 执行效果

十六、漏斗图

1、基本设置 

  注意：新建一个基本的漏斗图

• 新建一个ref 

• 代码： 

<div id="funnel" ref="funnel"></div>

• 设置id：funnel的style，设置宽高不然不显示
• 代码： 

#funnel {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

• 引入echarts

• 代码：

import * as echarts from 'echarts';

• 在mounted里进行各种配置

• 代码：

mounted() {
    let myEcharts = echarts.init(this.$refs.funnel);
    let option = {
      title: {
        text: "漏斗图",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a}<br/>{b}:{c}%",
      },
      series: [
        {
          type: "funnel",
          data: [
            { value: 60, name: "芒果" },
            { value: 40, name: "青柠" },
            { value: 20, name: "柚子" },
            { value: 80, name: "橘子" },
            { value: 100, name: "苹果" },
          ],
        },
      ],
    };
    myEcharts.setOption(option);
  },

• 执行npm run dev

 

2、设置漏斗的偏移（左、右）

 注意：

• 代码：

right:'50%'

• 执行效果

3、设置漏斗图的排序

  注意：

• 代码：

sort: "ascending", //默认降序排、ascending递增排序、none按照写的顺序排

• 执行效果

4、设置漏斗图内部样式

 注意：

• 代码：

itemStyle: {
  borderColor: "red",
  borderWidth: 3,
},

• 执行效果

 5、设置提示文本

 注意：

• 代码：

label: {
  //提示信息
  show: true,
  position: "inside",
},
emphasis: {
  label: {
    fontSize: 30,
  },
},

• 执行效果

十七、仪表盘

 1、基本设置

 注意：新建一个基本的仪表盘

• 新建一个ref 

• 代码： 

<div id="gauge" ref="gauge"></div>

• 设置id：gauge的style，设置宽高不然不显示
• 代码： 

#gauge {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

• 引入echarts

• 代码：

import * as echarts from 'echarts';

• 在mounted里进行各种配置

• 代码：

 mounted() {
    let myEcharts = echarts.init(this.$refs.gauge);
    let option = {
      title: {
        text: "漏斗图",
      },
      series: [
        {
          type: "gauge",
        },
      ],
    };
    myEcharts.setOption(option);
  },

• 执行npm run dev

 

 2、仪表盘设置基本数值

 注意：

• 代码：

data: [
  {
    value: 50,
    name: "信息",
  },
],

• 执行效果

3、仪表盘指针动画

 注意：

• 代码：

detail: {
  calueAnimation: true,
},

• 执行效果

4、仪表盘外圈根据数值显示 颜色

 注意：

• 代码：

progress: {
  show: true,
},

• 执行效果

十八、关系图 

1、基本设置 

 注意：新建一个基本的仪表盘

• 新建一个ref 

• 代码： 

<div id="graph" ref="graph"></div>

• 设置id：graph的style，设置宽高不然不显示
• 代码： 

#graph {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

• 引入echarts

• 代码：

import * as echarts from 'echarts';

• 在mounted里进行各种配置

• 代码：

import * as echarts from "echarts";
export default {
  data(){
    return{
      list:[
        {
          name:'江停',
          id:'1'
        },
        {
          name:'严峫',
          id:'2'
        },
        {
          name:'吴雩',
          id:'3'
        },
        {
          name:'步重华',
          id:'4'
        },
      ]
    }
  },
  mounted() {
    let myEcharts = echarts.init(this.$refs.graph);
    let option = {
      title: {
        text: "关系图",
      },
      series: [
        {
          type: "graph",
          data: this.list,
          layout: 'force'
        },
      ],
    };
    myEcharts.setOption(option);
  },
};

• 执行npm run dev

 

2、設置關係圖的點的大小

 注意：

• 代码：

symbolSize: 30,

• 执行效果

3、設置關係圖點的顏色 

 注意：

• 代码：

itemStyle: {
  color: "#95dcb2",
},

• 执行效果

4、设置关系图的文字

 注意：

• 代码：

label: {
  //图形上的文字
  show: true,
  position: "bottom",
  distance: 20, //距离图形的位置
  fontSize: 16,
},

• 执行效果

5、设置点与点之间的间距 

 注意：

• 代码：

force: {
  repulsion: 100,
  qravity: 0.01,
  edgeLength: 200,
},

• 执行效果

6、设置关系图的关系 

 注意：

• 代码：

data() {
    return {
      num:[
        {
          source:'1',//边的节点
          target:'2',//目标节点
          relation:{
            name:'夫夫'
          }
        },
        {
          source:'3',//边的节点
          target:'4',//目标节点
          relation:{
            name:'夫夫'
          }
        },
        {
          source:'1',//边的节点
          target:'3',//目标节点
          relation:{
            name:'朋友'
          }
        },
        {
          source:'2',//边的节点
          target:'4',//目标节点
          relation:{
            name:'表兄弟'
          }
        }
      ]
}


series: [
    {
        links:this.num
    }
]

• 执行效果

7、设置关系图显示关系

 注意：

• 代码：

edgeLabel: {
  show: true,
  position: "middle",
  formatter: (params) => {
    return params.data.relation.name;
  },
},

• 执行效果

十九、数据区域缩放

注意：新建折线图 dataZoom

 

• 代码： 

dataZoom: [
{//设置横向的
    type: "slider",
    xAxisIndex: 0,
    fliterMode: "none",
},
{//设置纵向的
    type: "slider",
    yAxisIndex: 0,
    fliterMode: "none",
},
],

•  执行效果

 二十、树状图

1、基本设置 

 注意：新建一个基本的树状图

• 新建一个ref 

• 代码： 

 <div ref="tree" id="tree"></div>

• 设置id：tree的style，设置宽高不然不显示
• 代码： 

#tree {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}

• 引入echarts

• 代码：

import * as echarts from 'echarts';

• 在mounted里进行各种配置
• 代码：

import * as echarts from "echarts";
export default {
  data() {
    return {
      list: {
        //最外层的数据就是树的根节点
        name: "根节点",
        children: [
          {
            name: "层1",
            children: [
              { name: "层2" },
              { name: "层2" },
              { name: "层2" },
              { name: "层2" },
            ],
          },
          {
            name: "层1",
            children: [
              { name: "层2" },
              { name: "层2" },
              { name: "层2" },
              { name: "层2" },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    let myEcharts = echarts.init(this.$refs.tree);
    let option = {
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          type: "tree",
          data: [this.list],
        },
      ],
    };
    myEcharts.setOption(option);
  },
};

• 执行npm run dev

 

2、设置节点圆的大小 

 注意：

• 代码：

symbolSize:50

• 执行效果

3、设置节点文字所在位置 

 注意：

• 代码：

label:{
    position:'left'
}

• 执行效果

4、高亮设置

  注意：

• 代码：

emphasis:{
            focus:'descendant'
          }

• 执行效果

5、设置树形图的布局方向 

 注意：利用大写的字母来表示方向

• 代码：

        //   orient:'LR',//从左到右
        //   orient:'RL',//从右到左
        //   orient:'TB',//从上到下
          orient:'BT',//从下到上

• 执行效果

6、旋转节点上的文字

 注意：

• 代码：

label: {
    rotate:90,
},

• 执行效果

二十一、数据排序

 

1、dataset 

• 首先设置dataset 

dataset: [
        {
          //数据的分类
          dimensions: ["类别", "数量"],
          //分类数据
          source: [
            ["苹果", 20],
            ["香蕉", 28],
            ["荔枝", 34],
          ],
        },
        {
          transform: {
            type: "sort", //数据排序，sort根据大小排序
            config: {
              dimension: "数量", //排序基于谁排序
              order:'desc'
            },
          },
        },
      ],

•  其次在series.encode配置映射项

      series:[
        {
            type: 'bar',
            encode:{//数据的映射
                x:'类别',
                y:'数量',
            },
            datasetIndex:1//使用dataset的第一条数据
        }
      ]

• 执行结果：

 

二十二、主题

 

1、内置主题设置 

• 注意：

• 代码 

    let myEcharts = echarts.init(this.$refs.tree,'dark');

•  执行

 

 

2、自定义主题 

去官网下载自定义主题

• 第一

 

• 第二 

 

• 第三

 

• 第四 ：复制Json文件

 

• 第五：新建一个静态资源文件

 

• 第六：将复制的Json代码导出静态资源文件 

 

• 第七：引入主题文件 

 

• 第八：将引入文件放入主题设置代码中 

 

• 第九：执行结果