• echarts学习总结

    一、新建一个简单的Echarts

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

    cnpm install echarts --save

     2、新建一个ref

    1. <template>
    2.     <div ref="myecharts" id="myecharts">div>
    3. template>

     3、引入echarts

    1. <script>
    2.   import * as echarts from 'echarts';
    3.   export default {
    4.     mounted() {
    5.       let myEcharts = echarts.init(this.$refs.myecharts)
    6.       myEcharts.setOption({
    7.         title: {
    8.           text: 'helloword'
    9.         },
    10.         xAxis: {
    11.           data: [
    12.             {value:'李玉',age:'21'},
    13.             {value:'简隋英',age:'23'},
    14.             {value:'江停',age:'24'},
    15.             {value:'严峫',age:'23'}
    16.           ]
    17.         },
    18.         yAxis: {
    19.   
    20.         },
    21.         series: [
    22.           {
    23.             name:'男主',
    24.             type: 'bar',
    25.             data:[21, 23, 24,23]
    26.           }
    27.         ]
    28.       })
    29.     }
    30.   }
    31.   script>

    4、设置#myecharts的样式

    1.   <style scoped>
    2.   #myecharts {
    3.     width: 500px;
    4.     height: 500px;
    5.     border: 1px solid red;
    6.   }
    7.   style>

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

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

    三、tooltip提示框组件

    四、 legend图例组件

     五、柱状图

    1、基本设置

    1、新建一个ref

    1. <template>
    2.     <div ref="myecharts" id="myecharts">div>
    3. template>

     2、引入echarts

    1. <script>
    2. import * as echarts from 'echarts';
    3. export default {
    4.   mounted() {
    5.     let myEcharts = echarts.init(this.$refs.myecharts)
    6.     let xData = ['李玉', '简隋英', '江停', '严峫']
    7.     let yData = [21, 23, 24, 23]
    8.     let option = {
    9.       title: {
    10.         text: '小说人物'
    11.       },
    12.       xAxis: {
    13.         data: xData,
    14.         type:'category',//坐标轴类型，value数据轴，category类目轴
    15.       },
    16.       yAxis: {
    17.  
    18.       },
    19.       series: [
    20.         {
    21.           name: '男主',
    22.           type: 'bar',//系列类
    23.           data: yData
    24.         }
    25.       ]
    26.     }
    27.     myEcharts.setOption(option)
    28.   }
    29. }
    30. script>

    3、设置#myecharts的样式

    1.   <style scoped>
    2.   #myecharts {
    3.     width: 500px;
    4.     height: 500px;
    5.     border: 1px solid red;
    6.   }
    7.   style>

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

    2、设置最大值和最小值

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

    • 代码截图 

    • 代码编写
    1. markPoint: {
    2.   data: [
    3.     {
    4.       type: 'max',
    5.       name: '最大值'
    6.     }, 
    7.     {
    8.       type: 'min',
    9.       name: '最小值'
    10.     }
    11.   ]
    12. }
    •  npm run dev运行效果

     

    3、设置平均值

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

    •  代码截图

    • 代码
    1. markLine:{
    2.   data:[
    3.     {
    4.       type:'average',
    5.       name:'平均值'
    6.     }
    7.   ]
    8. },
    •   npm run dev运行效果

    六、水平柱状图

     1、基本设置

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

    •   代码截图

    •  代码编写
    1. xAxis: {
    2.   type:'value'
    3. },
    4. yAxis: {
    5.   data: xData,
    6.   type: 'category',//坐标轴类型，value数据轴，category类目轴
    7. },
    •  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) {...} } } ] 

    • 代码截图

    • 代码编写
    1. itemStyle:{
    2.   normal:{
    3.     color:function(params){
    4.       let colorList = [
    5.         'red',
    6.         'green',
    7.         'pink',
    8.         'yellow'
    9.       ]
    10.       return colorList[params.dataIndex]
    11.     }
    12.   }
    13. },
    • npm run dev运行效果  

    七、饼状图 

    1、 基本设置

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

    • 新建一个ref 

    • 代码： 
    <div ref="bar" id="bar">div>
    • 设置id：bar的style，设置宽高不然不显示

    • 代码： 
    1. #bar{
    2.     height: 500px;
    3.     width: 500px;
    4.     border: 1px solid #ccc;
    5. }
    • 引入echarts

    • 代码：
    import * as echarts from 'echarts';
    • 在mounted里进行各种配置

    • 代码：
    1.  mounted() {
    2.         let myEcharts = echarts.init(this.$refs.bar)
    3.         let data = [
    4.             {value:33,name:'香蕉'},
    5.             {value:31,name:'苹果'},
    6.             {value:32,name:'葡萄'},
    7.             {value:22,name:'荔枝'}
    8.         ]
    9.         let option = {
    10.             title: {
    11.                 text: '饼状图',
    12.                 left: 'center'
    13.             },
    14.             series:[
    15.                 {
    16.                     name: '统计',
    17.                     type: 'pie',
    18.                     data
    19.                 }
    20.             ]
    21.         }
    22.         myEcharts.setOption(option)
    23.     }
    • 执行npm run dev

     

    2、加一个图例 

    注意：legend:{} 

    • 代码：
    legend:{},
    •  执行npm run dev

    3、设置纵向图例

    注意：legend : { ... }, 

     

    •  代码：
    1. legend:{
    2.     left:'left',
    3.     orient: 'verical'
    4. },
    •  执行npm run dev

    八、环形图

    1、环形图基本配置

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

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

     

    • 代码：
    1. //设置饼图的半径，一项为内半径，第二项为外半径
    2. radius:['40%','70%'],
    •  执行npm run dev 

    2、隐藏文本标签

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

    • 代码： 
    1. label:{
    2.     show: false//默认值是true
    3. }
    • 执行npm run dev  

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

     

    • 代码： 
    1. label: {
    2.     show: true,//默认值是true
    3.     //  outsize：外展示，inside内展示，center中心展示
    4.     position:'inside',
    5. }
    •  outsize：外展示

    • inside内展示 

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

    九、兰丁格尔玫瑰图

    1、基本设置

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

     

    •  代码：
    roseType: 'area',
    •  执行npm run dev 

    2、设置图形阴影效果

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

    • 代码：
    1. itemStyle:{
    2.     shadowBlur: 200,
    3.     shadowColor: '#000'
    4. }
    •   执行npm run dev 

    3、设置每块不同颜色

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

    • 代码：
    1. let data = [
    2.     { value: 33, name: '香蕉', itemStyle: { normal: { color: 'red' } } },
    3.     { value: 31, name: '苹果', itemStyle: { normal: { color: 'blue' } } },
    4.     { value: 32, name: '葡萄', itemStyle: { normal: { color: 'yellow' } } },
    5.     { value: 22, name: '荔枝', itemStyle: { normal: { color: 'green' } } }
    6. ]
    •   执行npm run dev 

     

    十、折线图

    1、基本设置

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

    • 新建一个ref 

    • 代码： 
    <div ref="line" id="line">div>
    • 设置id：line的style，设置宽高不然不显示

    • 代码： 
    1. #line {
    2.     height: 500px;
    3.     width: 500px;
    4.     border: 1px solid #ccc;
    5. }
    • 引入echarts

    • 代码：
    import * as echarts from 'echarts';
    • 在mounted里进行各种配置

    • 代码：
    1.     mounted() {
    2.         let myEcharts = echarts.init(this.$refs.line)
    3.         let xData = ['星期一', '星期二', '星期三', '星期四', '星期五']
    4.         let data = [130, 25, 30, 45, 100]
    5.         let option = {
    6.             xAxis: {
    7.                 type: 'category',
    8.                 data: xData
    9.             },
    10.             yAxis: {
    11.                 type: 'value'
    12.             },
    13.             series: [
    14.                 {
    15.                     type: 'line',
    16.                     data
    17.                 }
    18.             ]
    19.         }
    20.         myEcharts.setOption(option)
    21.     }
    • 执行npm run dev

     

    2、设置折线的平滑过度

     注意：series [ { smooth: true } ]

     

    • 代码：
    smooth: true
    • 执行npm run dev

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

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

    • 代码：
    areaStyle:{}
    • 执行npm run dev 

    4、设置最大值最小值

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

     

    • 代码： 
    1. markPoint: {
    2.     data: [
    3.         { type: 'max', name: '最大值' },
    4.         { type: 'min', name: '最小值' }
    5.     ]
    6. }
    • 执行npm run dev 

    5、设置平均值

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

    •  代码： 
    1. markLine: {
    2.     data: [
    3.         { type: 'average', name: '平均值' }
    4.     ]
    5. }
    • 执行npm run dev  

     十一、多条折线图的设置

    1、基本设置

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

    • 新建一个ref 

    • 代码： 
    <div ref="line" id="line">div>
    • 设置id：line的style，设置宽高不然不显示

    • 代码： 
    1. #line {
    2.     height: 500px;
    3.     width: 500px;
    4.     border: 1px solid #ccc;
    5. }
    • 引入echarts

    • 代码：
    import * as echarts from 'echarts';
    • 在mounted里进行各种配置

    • 代码：
    1.     mounted() {
    2.         let myEcharts = echarts.init(this.$refs.line)
    3.         let xData = ['星期一', '星期二', '星期三', '星期四', '星期五']
    4.  
    5.         let dataA = [130, 25, 30, 45, 100]
    6.         let dataB = [12, 54, 87, 56, 123]
    7.         let dataC = [34, 44, 65, 123, 23]
    8.         let dataD = [12, 65, 98, 121, 132]
    9.  
    10.         let option = {
    11.             title:{
    12.                 text:'销量'
    13.             },
    14.             xAxis: {
    15.                 type: 'category',
    16.                 data: xData
    17.             },
    18.             yAxis: {
    19.                 type: 'value'
    20.             },
    21.             series: [
    22.                 {
    23.                     name:'香蕉',
    24.                     type:'line',
    25.                     stack:'num',
    26.                     data:dataA
    27.                 },
    28.                 {
    29.                     name:'苹果',
    30.                     type:'line',
    31.                     stack:'num',
    32.                     data:dataB
    33.                 },
    34.                 {
    35.                     name:'荔枝',
    36.                     type:'line',
    37.                     stack:'num',
    38.                     data:dataC
    39.                 },
    40.                 {
    41.                     name:'芒果',
    42.                     type:'line',
    43.                     stack:'num',
    44.                     data:dataD
    45.                 },
    46.             ]
    47.         }
    48.         myEcharts.setOption(option)
    49.     }
    • 执行npm run dev

     

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

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

    • 代码：
    1. series: [
    2.     {
    3.         name:'香蕉',
    4.         type:'line',
    5.         stack:'num',
    6.         data:dataA,
    7.         areaStyle:{}
    8.     },
    9.     {
    10.         name:'苹果',
    11.         type:'line',
    12.         stack:'num',
    13.         data:dataB,
    14.         areaStyle:{}
    15.     },
    16.     {
    17.         name:'荔枝',
    18.         type:'line',
    19.         stack:'num',
    20.         data:dataC,
    21.         areaStyle:{}
    22.     },
    23.     {
    24.         name:'芒果',
    25.         type:'line',
    26.         stack:'num',
    27.         data:dataD,
    28.         areaStyle:{}
    29.     },
    30. ]
    •  执行npm run dev

     

    3、设置单个高亮效果

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

    • 代码：
    1. emphasis: {
    2.     focus: 'series'
    3. }
    • 执行npm run dev 

    十二、散点图

    1、基本设置

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

    • 新建一个ref 

    • 代码： 
    <div ref="scatter" id="scatter">div>
    • 设置id：scatter的style，设置宽高不然不显示

    • 代码： 
    1. #scatter {
    2.     height: 500px;
    3.     width: 500px;
    4.     border: 1px solid #ccc;
    5. }
    • 引入echarts

    • 代码：
    import * as echarts from 'echarts';
    • 在mounted里进行各种配置

    • 代码：
    1.     mounted() {
    2.         let myEcharts = echarts.init(this.$refs.scatter)
    3.         let option = {
    4.             xAxis: {},
    5.             yAxis: {},
    6.             series: [
    7.                 {
    8.                     data: [
    9.                         [18.2, 6.83],
    10.                         [6.32, 5.63],
    11.                         [17.0, 6.55],
    12.                         [8.18, 5.12],
    13.                         [15.0, 7.56]
    14.                     ],
    15.                     type:'scatter',//散点图
    16.                 }
    17.  
    18.             ]
    19.         }
    20.         myEcharts.setOption(option)
    21.     }
    • 执行npm run dev

     

    2、设置散点图大小

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

     

    • 代码：
    symbolSize: 50,
    • 执行npm run dev  

    3、设置图点整体颜色

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

    • 代码：
    color:'red'
    • 执行npm run dev 

    4、 设置图点渐变颜色

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

    • 代码： 
    1. color: {
    2.     type: 'linear',//线性渐变
    3.     x: 0,//相当于图形包围盒中的百分比
    4.     y: 0,
    5.     x2: 1,
    6.     y2: 0,
    7.     colorStops: [
    8.         {
    9.             offset: 0,
    10.             color: 'green'
    11.         }, {
    12.             offset: 1,
    13.             color: 'rgba(255,233,9)'
    14.         }
    15.     ]
    16. }
    •  执行npm run dev  

    5、鼠标移入高亮

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

    • 代码：
    1.     emphasis: {
    2.         itemStyle: {
    3.             borderColor: 'rgba(100,200,50,0.5)',
    4.             borderWidth: 30
    5.         }
    6.     },
    •   执行npm run dev  

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

     注意：tooltip:{},

    • 代码：
    tooltip:{},
    •  执行npm run dev  

    十三、grid属性

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

    注意：grid : { ... } 

    • 代码：
    1. grid:{
    2.     left:'70px',
    3.     right:'20%',
    4.     top:'30px',
    5.     bottom:'20%'
    6. },
    •    执行npm run dev  

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

    注意：grid : { show : true } 

    •  代码：
    show:true,
    • 执行npm run dev  

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

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

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

    • 代码：
    1. grid: {
    2.     show:true,
    3.     backgroundColor:'yellow',
    4. }
    •  执行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，设置宽高不然不显示

    • 代码： 
    1. #candlestick {
    2.     height: 500px;
    3.     width: 500px;
    4.     border: 1px solid #ccc;
    5. }
    • 引入echarts

    • 代码：
    import * as echarts from 'echarts';
    • 在mounted里进行各种配置

    • 代码：
    1. export default {
    2.     mounted() {
    3.         let myEcharts = echarts.init(this.$refs.candlestick)
    4.         let option = {
    5.             xAxis: {
    6.                 data: ['香蕉', '苹果', '葡萄', '荔枝', '芒果']
    7.             },
    8.             yAxis: {},
    9.             series: [
    10.                 {
    11.                     type: 'candlestick',
    12.                     data: [
    13.                         [20,34,10,38],
    14.                         [40,35,30,50],
    15.                         [31,38,33,44],
    16.                         [38,15,5,42]
    17.                     ]
    18.                 }
    19.             ]
    20.         }
    21.         myEcharts.setOption(option)
    22.     }
    23. }
    • 执行npm run dev

     

     2、设置提示内容

    注意：tooltip : { ... }

    • 代码：
    1. tooltip: {
    2.     trgger: 'axis',
    3.     axisPointer: {
    4.         type: 'cross'
    5.     }
    6. },
    • 执行npm run dev

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

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

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

    • 代码：
    1. itemStyle: {
    2.     color: 'blue',
    3.     color0: 'yellow'
    4. },
    •  执行npm run dev

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

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

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

     

    • 代码：
    1. itemStyle: {
    2.     borderColor:'#000',
    3.     borderColor0:'#000',
    4. },
    •  执行npm run dev

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

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

    • 代码：
    1. markPoint: {
    2.     data: [
    3.         {
    4.             name: '最大值',
    5.             type: 'max',
    6.             valueDim: 'highest'//在那个维度上设置最发值或最小值
    7.         },
    8.         {
    9.             name: '最小值',
    10.             type: 'min',
    11.             valueDim: 'lowest'
    12.         },
    13.         {
    14.             name: '平均值',
    15.             type: 'average',
    16.             valueDim: 'close'
    17.         }
    18.     ]
    19. },
    •  执行npm run dev

    十五、雷达图

    1、基本设置

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

    • 新建一个ref 

    • 代码： 
     <div ref="radar" id="myRadar">div>
    • 设置id：myRadar的style，设置宽高不然不显示
    • 代码： 
    1. #myRadar {
    2.     height: 500px;
    3.     width: 500px;
    4.     border: 1px solid #ccc;
    5. }
    • 引入echarts

    • 代码：
    import * as echarts from 'echarts';
    • 在mounted里进行各种配置

    • 代码：
    1.     mounted() {
    2.         let myEcharts = echarts.init(this.$refs.radar)
    3.         let option = {
    4.             title: {
    5.                 title: '雷达图'
    6.             },
    7.             radar: [
    8.                 {
    9.                     indicator: [
    10.                         { name: '芒果', max: 6500 },
    11.                         { name: '葡萄', max: 16000 },
    12.                         { name: '香蕉', max: 30000 },
    13.                         { name: '苹果', max: 52000 },
    14.                         { name: '荔枝', max: 38000 }
    15.                     ]
    16.                 }
    17.             ],
    18.             series: [
    19.                 {
    20.                     type: 'radar',
    21.                     data: [
    22.                         {
    23.                             value: [4300, 6400, 5400, 3400, 2300]
    24.                         }
    25.                     ]
    26.                 }
    27.             ]
    28.         }
    29.         myEcharts.setOption(option)
    30.     }
    • 执行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、设置指示器的颜色

     注意：

    • 代码：
    1. axisName: {
    2.     formatter: '{value}',
    3.     color: 'red'
    4. },
    • 执行效果

    7、设置背景样式

    • 代码：
    1. splitArea:{
    2.     areaStyle:{
    3.         color:['green','yellow','pink','red','blue'],
    4.         shadowColor:'0,0,0,0.2',
    5.         shadowBlur:10
    6.     }
    7. },
    • 执行效果

    8、设置内部线段为虚线

     注意：

    • 代码：
    1. lineStyle: {
    2.     type: 'dashed'
    3. },
    • 执行效果

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

      注意：

    • 代码：
    1. areaStyle:{
    2.     color:'rgba(255,255,0,0.5)'
    3. }
    • 执行效果

    十六、漏斗图

    1、基本设置 

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

    • 新建一个ref 

    • 代码： 
    <div id="funnel" ref="funnel">div>
    • 设置id：funnel的style，设置宽高不然不显示
    • 代码： 
    1. #funnel {
    2.     height: 500px;
    3.     width: 500px;
    4.     border: 1px solid #ccc;
    5. }
    • 引入echarts

    • 代码：
    import * as echarts from 'echarts';
    • 在mounted里进行各种配置

    • 代码：
    1. mounted() {
    2.     let myEcharts = echarts.init(this.$refs.funnel);
    3.     let option = {
    4.       title: {
    5.         text: "漏斗图",
    6.       },
    7.       tooltip: {
    8.         trigger: "item",
    9.         formatter: "{a}
      {b}:{c}%"      ,
    10.       },
    11.       series: [
    12.         {
    13.           type: "funnel",
    14.           data: [
    15.             { value: 60, name: "芒果" },
    16.             { value: 40, name: "青柠" },
    17.             { value: 20, name: "柚子" },
    18.             { value: 80, name: "橘子" },
    19.             { value: 100, name: "苹果" },
    20.           ],
    21.         },
    22.       ],
    23.     };
    24.     myEcharts.setOption(option);
    25.   },
    • 执行npm run dev

     

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

     注意：

    • 代码：
    right:'50%'
    • 执行效果

    3、设置漏斗图的排序

      注意：

    • 代码：
    sort: "ascending", //默认降序排、ascending递增排序、none按照写的顺序排
    • 执行效果

    4、设置漏斗图内部样式

     注意：

    • 代码：
    1. itemStyle: {
    2.   borderColor: "red",
    3.   borderWidth: 3,
    4. },
    • 执行效果

     5、设置提示文本

     注意：

    • 代码：
    1. label: {
    2.   //提示信息
    3.   show: true,
    4.   position: "inside",
    5. },
    6. emphasis: {
    7.   label: {
    8.     fontSize: 30,
    9.   },
    10. },
    • 执行效果

    十七、仪表盘

     1、基本设置

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

    • 新建一个ref 

    • 代码： 
    <div id="gauge" ref="gauge">div>
    • 设置id：gauge的style，设置宽高不然不显示
    • 代码： 
    1. #gauge {
    2.     height: 500px;
    3.     width: 500px;
    4.     border: 1px solid #ccc;
    5. }
    • 引入echarts

    • 代码：
    import * as echarts from 'echarts';
    • 在mounted里进行各种配置

    • 代码：
    1.  mounted() {
    2.     let myEcharts = echarts.init(this.$refs.gauge);
    3.     let option = {
    4.       title: {
    5.         text: "漏斗图",
    6.       },
    7.       series: [
    8.         {
    9.           type: "gauge",
    10.         },
    11.       ],
    12.     };
    13.     myEcharts.setOption(option);
    14.   },
    • 执行npm run dev

     

     2、仪表盘设置基本数值

     注意：

    • 代码：
    1. data: [
    2.   {
    3.     value: 50,
    4.     name: "信息",
    5.   },
    6. ],
    • 执行效果

    3、仪表盘指针动画

     注意：

    • 代码：
    1. detail: {
    2.   calueAnimation: true,
    3. },
    • 执行效果

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

     注意：

    • 代码：
    1. progress: {
    2.   show: true,
    3. },
    • 执行效果

    十八、关系图 

    1、基本设置 

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

    • 新建一个ref 

    • 代码： 
    <div id="graph" ref="graph">div>
    • 设置id：graph的style，设置宽高不然不显示
    • 代码： 
    1. #graph {
    2.     height: 500px;
    3.     width: 500px;
    4.     border: 1px solid #ccc;
    5. }
    • 引入echarts

    • 代码：
    import * as echarts from 'echarts';
    • 在mounted里进行各种配置

    • 代码：
    1. import * as echarts from "echarts";
    2. export default {
    3.   data(){
    4.     return{
    5.       list:[
    6.         {
    7.           name:'江停',
    8.           id:'1'
    9.         },
    10.         {
    11.           name:'严峫',
    12.           id:'2'
    13.         },
    14.         {
    15.           name:'吴雩',
    16.           id:'3'
    17.         },
    18.         {
    19.           name:'步重华',
    20.           id:'4'
    21.         },
    22.       ]
    23.     }
    24.   },
    25.   mounted() {
    26.     let myEcharts = echarts.init(this.$refs.graph);
    27.     let option = {
    28.       title: {
    29.         text: "关系图",
    30.       },
    31.       series: [
    32.         {
    33.           type: "graph",
    34.           data: this.list,
    35.           layout: 'force'
    36.         },
    37.       ],
    38.     };
    39.     myEcharts.setOption(option);
    40.   },
    41. };
    • 执行npm run dev

     

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

     注意：

    • 代码：
    symbolSize: 30,
    • 执行效果

    3、設置關係圖點的顏色 

     注意：

    • 代码：
    1. itemStyle: {
    2.   color: "#95dcb2",
    3. },
    • 执行效果

    4、设置关系图的文字

     注意：

    • 代码：
    1. label: {
    2.   //图形上的文字
    3.   show: true,
    4.   position: "bottom",
    5.   distance: 20, //距离图形的位置
    6.   fontSize: 16,
    7. },
    • 执行效果

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

     注意：

    • 代码：
    1. force: {
    2.   repulsion: 100,
    3.   qravity: 0.01,
    4.   edgeLength: 200,
    5. },
    • 执行效果

    6、设置关系图的关系 

     注意：

    • 代码：
    1. data() {
    2.     return {
    3.       num:[
    4.         {
    5.           source:'1',//边的节点
    6.           target:'2',//目标节点
    7.           relation:{
    8.             name:'夫夫'
    9.           }
    10.         },
    11.         {
    12.           source:'3',//边的节点
    13.           target:'4',//目标节点
    14.           relation:{
    15.             name:'夫夫'
    16.           }
    17.         },
    18.         {
    19.           source:'1',//边的节点
    20.           target:'3',//目标节点
    21.           relation:{
    22.             name:'朋友'
    23.           }
    24.         },
    25.         {
    26.           source:'2',//边的节点
    27.           target:'4',//目标节点
    28.           relation:{
    29.             name:'表兄弟'
    30.           }
    31.         }
    32.       ]
    33. }
    34.  
    35.  
    36. series: [
    37.     {
    38.         links:this.num
    39.     }
    40. ]
    • 执行效果

    7、设置关系图显示关系

     注意：

    • 代码：
    1. edgeLabel: {
    2.   show: true,
    3.   position: "middle",
    4.   formatter: (params) => {
    5.     return params.data.relation.name;
    6.   },
    7. },
    • 执行效果

    十九、数据区域缩放

    注意：新建折线图 dataZoom

     

    • 代码： 
    1. dataZoom: [
    2. {//设置横向的
    3.     type: "slider",
    4.     xAxisIndex: 0,
    5.     fliterMode: "none",
    6. },
    7. {//设置纵向的
    8.     type: "slider",
    9.     yAxisIndex: 0,
    10.     fliterMode: "none",
    11. },
    12. ],
    •  执行效果

     二十、树状图

    1、基本设置 

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

    • 新建一个ref 

    • 代码： 
     <div ref="tree" id="tree">div>
    • 设置id：tree的style，设置宽高不然不显示
    • 代码： 
    1. #tree {
    2.     height: 500px;
    3.     width: 500px;
    4.     border: 1px solid #ccc;
    5. }
    • 引入echarts

    • 代码：
    import * as echarts from 'echarts';
    • 在mounted里进行各种配置
    • 代码：
    1. import * as echarts from "echarts";
    2. export default {
    3.   data() {
    4.     return {
    5.       list: {
    6.         //最外层的数据就是树的根节点
    7.         name: "根节点",
    8.         children: [
    9.           {
    10.             name: "层1",
    11.             children: [
    12.               { name: "层2" },
    13.               { name: "层2" },
    14.               { name: "层2" },
    15.               { name: "层2" },
    16.             ],
    17.           },
    18.           {
    19.             name: "层1",
    20.             children: [
    21.               { name: "层2" },
    22.               { name: "层2" },
    23.               { name: "层2" },
    24.               { name: "层2" },
    25.             ],
    26.           },
    27.         ],
    28.       },
    29.     };
    30.   },
    31.   mounted() {
    32.     let myEcharts = echarts.init(this.$refs.tree);
    33.     let option = {
    34.       tooltip: {
    35.         trigger: "item",
    36.       },
    37.       series: [
    38.         {
    39.           type: "tree",
    40.           data: [this.list],
    41.         },
    42.       ],
    43.     };
    44.     myEcharts.setOption(option);
    45.   },
    46. };
    • 执行npm run dev

     

    2、设置节点圆的大小 

     注意：

    • 代码：
    symbolSize:50
    • 执行效果

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

     注意：

    • 代码：
    1. label:{
    2.     position:'left'
    3. }
    • 执行效果

    4、高亮设置

      注意：

    • 代码：
    1. emphasis:{
    2.             focus:'descendant'
    3.           }
    • 执行效果

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

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

    • 代码：
    1.         //   orient:'LR',//从左到右
    2.         //   orient:'RL',//从右到左
    3.         //   orient:'TB',//从上到下
    4.           orient:'BT',//从下到上
    • 执行效果

    6、旋转节点上的文字

     注意：

    • 代码：
    1. label: {
    2.     rotate:90,
    3. },
    • 执行效果

    二十一、数据排序

     

    1、dataset 

    • 首先设置dataset 
    1. dataset: [
    2.         {
    3.           //数据的分类
    4.           dimensions: ["类别", "数量"],
    5.           //分类数据
    6.           source: [
    7.             ["苹果", 20],
    8.             ["香蕉", 28],
    9.             ["荔枝", 34],
    10.           ],
    11.         },
    12.         {
    13.           transform: {
    14.             type: "sort", //数据排序，sort根据大小排序
    15.             config: {
    16.               dimension: "数量", //排序基于谁排序
    17.               order:'desc'
    18.             },
    19.           },
    20.         },
    21.       ],
    •  其次在series.encode配置映射项
    1.       series:[
    2.         {
    3.             type: 'bar',
    4.             encode:{//数据的映射
    5.                 x:'类别',
    6.                 y:'数量',
    7.             },
    8.             datasetIndex:1//使用dataset的第一条数据
    9.         }
    10.       ]
    • 执行结果：

     

    二十二、主题

     

    1、内置主题设置 

    • 注意：

    • 代码 
        let myEcharts = echarts.init(this.$refs.tree,'dark');
    •  执行

     

     

    2、自定义主题 

    去官网下载自定义主题

    • 第一

     

    • 第二 

     

    • 第三

     

    • 第四 ：复制Json文件

     

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

     

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

     

    • 第七：引入主题文件 

     

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

     

    • 第九：执行结果 

     

     

  • 相关阅读:
    如何编译生成SDL1.2版本
    STM32单片机酒精检测防酒驾系统酒精报警器
    HTML5期末大作业 基于HTML+CSS+JavaScript学校官网首页
    C语言项目实战——贪吃蛇
    以太网 VLAN（简介、MAC地址表与VLAN）
    小散量化炒股记｜wxPython中多线程解决方案，加速全市场选股就用它
    赋能心理大模型，景联文科技推出高质量心理大模型数据库
    语文提高计划
    HTML小游戏14 —— H5横版冒险游戏《无限生机》（附完整源码）
    AntDB内存管理之内存上下文
  • 原文地址：https://blog.csdn.net/Seven_Ting/article/details/133184125