vue中echarts使用記錄-有解無憂

1. echarts的使用

安裝

npm i -S echarts@4.9.0

引入

main.js中引入(版本4.9.0)

import Echarts from 'echarts'
Vue.prototype.$echarts = Echarts

使用
①繪制面積圖
在這里插入圖片描述

注意容器要有寬高，獲取DOM都是在mounted中

<div id="total-orders-chart" :style="{ width: '100%', height: '100%'}"></div>

// 原生echarts
    const chartDom = document.getElementById('total-orders-chart')
    const chart = this.$echarts.init(chartDom)
    chart.setOption({
      xAxis: {
        type: 'category', // 默認是value，繪制出來是直線
        show: false,
        boundaryGap: false // 邊界空白間隙
      }, // x軸
      yAxis: {
        show: false
      }, // y軸
      // 一個series就是一個圖表
      series: [
        {
          type: 'line',
          data: [620, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220, 620],
          areaStyle: {
            color: 'purple' // 面積部分的顏色
          },
          lineStyle: {
            width: 0.5 // 線條
          },
          itemStyle: {
            opacity: 0 // 圓圈是否顯示
          },
          smooth: true // 平滑
        }
      ],
      grid: { // 繪圖網格的距離
        top: 0,
        left: 0,
        right: 0,
        bottom: 0
      }
    })

②繪制柱狀圖
在這里插入圖片描述

<div
   id="today-users-chart"
   :style="{ width: '100%', height: '100%' }"
 ></div>

const chartDom = document.getElementById('today-users-chart')
    const chart = this.$echarts.init(chartDom)
    chart.setOption({
      color: '#3398db',
      tooltip: {},
      xAxis: {
        type: 'category',
        data:['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00', '12:00','13:00', '14:00'],
        show: false
        // boundaryGap: false
      }, // x軸
      yAxis: {
        show: false
      }, // y軸
      // 一個series就是一個圖表
      series: [
        {
          type: 'bar',
          data: [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290, 330, 150],
          barWidth: '60%',
          // areaStyle: {
          //   color: 'purple'
          // },
          // lineStyle: {
          //   width: 0
          // },
          // itemStyle: {
          //   opacity: 0
          // },
          // smooth: true
        }
      ],
      grid: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0
      }
    })

③繪制橫向柱狀圖+自定義
在這里插入圖片描述

<div
  id="total-users-chart"
  :style="{ width: '100%', height: '100%' }"
></div>

// 原生echarts
    const chartDom = document.getElementById('total-users-chart')
    const chart = this.$echarts.init(chartDom)
    chart.setOption({
      grid: {
        top: 0,
        left: 0,
        right: '-50%',
        bottom: 0
      },
      xAxis: {
        type: 'value',
        show: false,
        boundaryGap: false
      }, // x軸
      yAxis: {
        show: false,
        type: 'category'
      }, // y軸
      // 一個series就是一個圖表
      series: [
        {
          type: 'bar',
          stack: '總量', // 添加這個屬性可以讓多個成為一行
          data: [100],
          barWidth: 10,
          itemStyle: {
            color: '#45c946'
          }
        },
        {
          type: 'bar',
          stack: '總量', // 添加這個屬性可以讓多個成為一行
          data: [750],
          itemStyle: {
            color: '#eee'
          }
        },
        {
          type: 'custom',
          stack: '總量', // 添加這個屬性可以讓多個成為一行
          data: [100], // 這里的100和series中的第一保持一致
          renderItem: (params, api) => {
            const value = api.value(0) // 會獲取本物件(type=custom)中data的第一個元素100，
            const endPoint = api.coord([value, 0]) // 獲取第一個元素(100)的坐標，陣列中傳入的引數是value的x軸和y軸的值，x軸值是100，y軸值是0
            console.log(8585, endPoint)
            return {
              type: 'group',
              position: endPoint, // 繪圖的坐標系
              children: [
                {
                  type: 'path',
                  shape: {
                    d:
                      'M524.096 753.088l342.912-395.584a16 16 0 0 0-12.032-26.496H169.024a16 16 0 0 0-12.032 26.496l343.04 395.52a16 16 0 0 0 24.064 0z', // svg影像內容(iconfont中選好圖片，點下載，彈窗中選復制svg，復制出來以后把path標簽里面的d屬性的值粘貼過來)
                    x: -5, // 偏移量
                    y: -20,
                    width: 10,
                    height: 10,
                    layout: 'cover' // SVGd的縮放屬性
                  },
                  style: {
                    fill: '#45c946' // 填充色
                  }
                },
                {
                  type: 'path',
                  shape: {
                    d:
                      'M511.744 319.999l-383.744 383.744h767.488l-383.744-383.744z', // svg影像內容
                    x: -5, // 偏移量
                    y: 10,
                    width: 10,
                    height: 10,
                    layout: 'cover'
                  },
                  style: {
                    fill: '#45c946'
                  }
                }
              ]
            }
          }
        }
      ]
    })

④水球圖
在這里插入圖片描述

需要再安裝 npm i -S echarts-liquidfill

<template>
  <div class="li-quid-fill" id="container">
  </div>
</template>

import 'echarts-liquidfill'

export default {
  name: 'liQuidFill',
  data () {
    return {}
  },
  created () {},
  mounted () {
    const data = [0.68, { value: 0.5, direction: 'left' }, 0.4, 0.3] // 波浪必須從小到大
    const chart = this.$echarts.init(document.getElementById('container'))
    chart.setOption({
      series: [
        {
          type: 'liquidFill',
          data,
          shape: 'circle', // 形狀
          color: ['red', 'blue', 'green'],
          itemStyle: {
            opacity: 0.6
          },
          emphasis: {
            itemStyle: {
              opacity: 0.9
            }
          },
          // waveAnimation: false
          amplitude: 20, // 波浪振幅，數值越大，波浪越大
          backgroundStyle: {
            // color: 'purple',
            // borderWidth: 4,
            // borderColor: '#333'
          },
          outline: {
            show: true,
            borderDistance: 10,
            itemStyle: {
              // borderWidth: 2
              // borderColor: 'red'
              // shadowBlur: 'none'
            }
          }
        }
      ]
    })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.li-quid-fill {
  height: 100%;
}
</style>

⑤詞云圖
需要再安裝 npm i -S echarts-wordcloud

<div class="word-cloud" id="wordCloud"></div>

const data = [
      {
        name: '劉強東',
        value: 200
      },
      {
        name: '馬云',
        value: 80
      },
      {
        name: '馬超',
        value: 35
      },
      {
        name: '劉強東',
        value: 150
      },
      {
        name: '馬云',
        value: 80
      },
      {
        name: '馬超',
        value: 35
      },
      {
        name: '劉強東',
        value: 60
      },
      {
        name: '馬云',
        value: 40
      },
      {
        name: '馬超',
        value: 15
      }
    ]
    const chart = this.$echarts.init(document.getElementById('wordCloud'))
    chart.setOption({
      series: [
        {
          type: 'wordCloud',
          data,
          shape: 'circle', // 形狀
          textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // Color can be a callback function or a color string
            color: function() {
              // Random color
              return (
                'rgb(' +
                [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') +
                ')'
              )
            }
          }
        }
      ]
    })

2. vue-echarts

安裝

npm i -S echarts@4.9.0 vue-echarts@5.0.0-beta.0

引入 main.js

import Echarts from 'echarts'
import VueEcharts from 'vue-echarts'

Vue.prototype.$echarts = Echarts
Vue.component('v-chart', VueEcharts)

使用
①繪制面積圖
組件默認寬高：600px×400px，如果需要我們可以手動設定
.echarts { width: 100%; height: 100%; }，這個類(.echarts)組件自己的，v-chart外層不需要容器

<template>
	<v-chart :options="getOptions()" />
</template>

getOptions () {
      return {
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false
        }, // x軸
        yAxis: {
          show: false
        }, // y軸
        // 一個series就是一個圖表
        series: [
          {
            type: 'line',
            data: [620, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220, 620],
            // data: this.orderTrend,
            areaStyle: {
              color: 'purple'
            },
            lineStyle: {
              width: 0
            },
            itemStyle: {
              opacity: 0
            },
            smooth: true
          }
        ],
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        }
      }
    }

②繪制柱狀圖

<v-chart :options="getOptions()" />

getOptions () {
      return {
        color: '#3398db',
        tooltip: {},
        xAxis: {
          type: 'category',
          // data: this.orderUserTrendAxis,
          data: [
            '00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','12:00','13:00','14:00'
          ],
          show: false
          // boundaryGap: false
        }, // x軸
        yAxis: {
          show: false
        }, // y軸
        // 一個series就是一個圖表
        series: [
          {
            type: 'bar',
            // data: this.orderUserTrend,
            data: [
              410,82,200,334,390,330,220,150,82,200,134,290,330,150
            ],
            barWidth: '60%'
            // areaStyle: {
            //   color: 'purple'
            // },
            // lineStyle: {
            //   width: 0
            // },
            // itemStyle: {
            //   opacity: 0
            // },
            // smooth: true
          }
        ],
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        }
      }
    }

③繪制橫向柱狀圖+自定義

<v-chart :options="getOptions()" />

getOptions () {
      return {
        grid: {
          top: 0,
          left: 0,
          right: '-50%',
          bottom: 0
        },
        xAxis: {
          type: 'value',
          show: false,
          boundaryGap: false
        }, // x軸
        yAxis: {
          show: false,
          type: 'category'
        }, // y軸
        // 一個series就是一個圖表
        series: [
          {
            name: '上月平臺用戶數',
            type: 'bar',
            stack: '總量', // 添加這個屬性可以讓多個成為一行
            data: [100],
            // data: [this.userLastMonth],
            barWidth: 10,
            itemStyle: {
              color: '#45c946'
            }
          },
          {
            name: '今日平臺用戶數',
            type: 'bar',
            stack: '總量', // 添加這個屬性可以讓多個成為一行
            // data: [this.userTodayNumber],
            data: [750],
            itemStyle: {
              color: '#eee'
            }
          },
          {
            type: 'custom',
            stack: '總量', // 添加這個屬性可以讓多個成為一行
            data: [100], // 這里的100和series中的第一個保持一致
            // data: [this.userLastMonth], // 這里的100和series中的第一個保持一致
            renderItem: (params, api) => {
              const value = api.value(0) // 會獲取本物件中data的第一個 200，
              const endPoint = api.coord([value, 0]) // 獲取2第一個元素(200)的坐標
              console.log(8585, endPoint)
              return {
                type: 'group',
                position: endPoint,
                children: [
                  {
                    type: 'path',
                    shape: {
                      d:
                        'M524.096 753.088l342.912-395.584a16 16 0 0 0-12.032-26.496H169.024a16 16 0 0 0-12.032 26.496l343.04 395.52a16 16 0 0 0 24.064 0z', // svg影像內容
                      x: -5, // 偏移量
                      y: -20,
                      width: 10,
                      height: 10,
                      layout: 'cover'
                    },
                    style: {
                      fill: '#45c946'
                    }
                  },
                  {
                    type: 'path',
                    shape: {
                      d:
                        'M511.744 319.999l-383.744 383.744h767.488l-383.744-383.744z', // svg影像內容
                      x: -5, // 偏移量
                      y: 10,
                      width: 10,
                      height: 10,
                      layout: 'cover'
                    },
                    style: {
                      fill: '#45c946'
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    }

④ 繪制柱狀圖
在這里插入圖片描述

<v-chart :options="chartOption" />

// 軸上的刻度
            alignWithLabel: true,
            lineStyle: {
              color: '#999'
            }
          },
          axisLine: { // 軸線
            lineStyle: {
              color: '#f00'
            }
          },
          axisLabel: {
            color: '#0f0'
          }
        },
        yAxis: {
          axisLine: { // 軸線
            show: false
          },
          axisTick: { // 軸上的刻度
            show: false
          },
          splitLine: { // 網格分割線
            lineStyle: {
              type: 'dotted',
              color: '#eee'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: '35%',
            data: [200, 250, 300, 350, 300, 250, 200, 250, 300, 350, 300, 250]
          }
        ],
        color: '#3398db', // 柱子顏色
        grid: {
          top: 70,
          left: 60,
          right: 60,
          bottom: 50
        }
      }

插曲面積圖時，如果Y軸上方頂邊了，可設定min, max
在這里插入圖片描述
⑤環形餅狀圖

<v-chart :options="categoryOptions" />

renderPieChart () {
      const mockData = [
        {
          legengName: '粉面粥店',
          value: 67,
          percent: '15.40',
          itemStyle: {
            color: '#e7e702'
          },
          name: '粉面粥店 | 15.40%'
        },
        {
          legengName: '簡餐便當',
          value: 97,
          percent: '22.30',
          itemStyle: {
            color: '#8d7fec'
          },
          name: '簡餐便當 | 22.30%'
        },
        {
          legengName: '漢堡披薩',
          value: 92,
          percent: '21.15',
          itemStyle: {
            color: '#5085f2'
          },
          name: '漢堡披薩 | 21.15%'
        }
      ]
      console.log(mockData, colors)
      this.categoryOptions = {
        title: [
          {
            text: '品類分布', // 兩個標題
            textStyle: {
              fontSize: 14,
              color: '#444'
            },
            left: 20,
            top: 20
          },
          {
            text: '累計訂單量', // 兩個標題
            subtext: 320, // 副標題
            x: '39.5%',
            y: '45.5%',
            textStyle: {
              fontSize: 14,
              color: '#999'
            },
            subtextStyle: {
              fontSize: 28,
              color: '#333'
            },
            textAlign: 'center'
            // left: 20,
            // top: 20
          }
        ],
        series: [
          {
            name: '品類分布',
            type: 'pie',
            data: mockData,
            label: {
              // normal: {
              show: true,
              // position: 'outter',
              formatter (params) {
                return params.data.legengName
              }
              // }
            },
            center: ['40%', '50%'], // 餅圖位置
            radius: ['45%', '60%'], // radius 半徑：第一個值是內半徑、第二個值是外半徑
            labelLine: {
              // normal: {
              length: 5, // 指向餅圖的長線段
              length2: 3, // 指向文字的線段
              smooth: true
              // }
            },
            clockwise: false, // 資料是否順時針
            itemStyle: { // 每個圖之間的間隙
              borderWidth: 4,
              borderColor: '#fff'
            }
          }
        ],
        legend: { // 品類的描述
          type: 'scroll',
          orient: 'vertical',
          height: 250,
          top: 'middle',
          left: '70%',
          textStyle: {
            color: '#8c8c8c'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter (params) {
            const str =
              params.seriesName +
              '<br/>' +
              params.marker +
              params.data.legengName +
              '<br/>' +
              '數量：' +
              params.data.value +
              '<br/>' +
              '占比：' +
              params.data.percent +
              '%'
            return str
          },
          backgroundColor: 'rgba(50, 50, 50, 0.7)',
          textStyle: {
            color: '#fff'
          }
        }
      }
    },

⑥繪制百度地圖散點圖
在這里插入圖片描述

要在index.html中引入百度地圖api

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>

然后bMap.vue檔案中引入 echarts/extension/bmap/bmap

<template>
  <div class="b-map-test">
    <v-chart :options="option"></v-chart>
  </div>
</template>

// 第二步要引入這里
import 'echarts/extension/bmap/bmap'

this.option = {
      title: {
        text: '外賣銷售資料大盤',
        subtext: '銷售趨勢統計',
        sublink: 'https://www.baidu.com',
        left: 'center'
      },
      bmap: {
        key: 'G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb',
        center: [104.114129, 37.550339],
        zoom: 5, // 縮放比例
        roam: true, // 是否允許滑鼠互動如縮放、拖拽
        mapStyle: {
          styleJson: [
            {
              featureType: 'water',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'land',
              elementType: 'all',
              stylers: {
                color: '#f3f3f3'
              }
            },
            {
              featureType: 'railway',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'highway',
              elementType: 'all',
              stylers: {
                color: '#fdfdfd'
              }
            },
            {
              featureType: 'highway',
              elementType: 'labels',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'geometry',
              stylers: {
                color: '#fefefe'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'geometry.fill',
              stylers: {
                color: '#fefefe'
              }
            },
            {
              featureType: 'poi',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'green',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'subway',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'manmade',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'local',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'labels',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'boundary',
              elementType: 'all',
              stylers: {
                color: '#fefefe'
              }
            },
            {
              featureType: 'building',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'label',
              elementType: 'labels.text.fill',
              stylers: {
                color: '#999999'
              }
            }
          ]
        }
      },
      tooltip: {},
      series: [
        {
          name: '銷售額',
          type: 'scatter', // 散點圖
          coordinateSystem: 'bmap', // 坐標系統 百度地圖
          data: convertData(data),
          encode: {
            value: 2 // 定制value值為資料value陣列中的第三項，下標為2，效果：tooltip上顯示的就是銷售額數值80、100、180(因為經過convertData函式處理后，資料變成了 { name: '海門', value: [ x坐標, y坐標, 180] })
          },
          itemStyle: {
            color: 'purple' // 點的顏色
          },
          symbolSize (value) { // 點的大小
            return value[2] / 10 // 這里的value為每個資料的value陣列，取第三項，縮小10倍
          },
          label: {
            show: false, // 這里設定成false，配合下面的emphasis，效果是滑鼠移入顯示label
            position: 'right',
            // formatter: '{b}' // 默認為value值
            formatter (v) {
              return `${v.data.name} - ${v.data.value[2]}`
            }
          },
          emphasis: {
            label: {
              show: true
            }
          }
        },
        {
          name: 'Top 10',
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          data: convertData(data.sort((a, b) => b.value - a.value)).slice(0, 10),
          encode: {
            value: 2
          },
          symbolSize (value) { // 點的大小
            return value[2] / 10 // 這里的value為每個資料的value陣列，取第三項，縮小10倍
          },
          label: {
            show: true,
            position: 'right',
            // formatter: '{b}'
            formatter (v) {
              return `${v.data.name} - ${v.data.value[2]}`
            }
          },
          hoverAnimation: true,
          rippleEffect: { // 波紋效果
            brushType: 'stroke'
          },
          itemStyle: {
            color: 'purple',
            shadowBlur: 10,
            shadowColor: '#333'
          }
        }
      ]
    }

3. v-echarts

安裝

npm i -S v-charts@1.19.0 echarts@4.9.0

引入 main.js

import './plugins/vcharts'

plugins/vcharts.js

import Vue from 'vue'
// 支持按需引入
// import VEline from 'v-charts/lib/line.common'
// Vue.component('ve-line', VEline)

import VCharts from 'v-charts'
import 'v-charts/lib/style.css'

Vue.use(VCharts)

①繪制百度地圖散點圖

<template>
    <!-- v-charts的地圖功能 -->
    <!-- <ve-map :data="chartData" height="800px"></ve-map> -->

    <!-- 另外 v-charts還封裝了百度地圖、高德地圖的殼子, 使用了v-bmap之后就不用在index.html中引入百度地圖的api了 -->
    <ve-bmap
    :title="title"
    :settings="chartSettings"
    :tooltip="{}"
    :series="chartSeries"
    height="100%">
  </ve-bmap>
</template>

title: {
        text: '外賣銷售資料大盤',
        subtext: '銷售趨勢統計',
        sublink: 'https://www.baidu.com',
        left: 'center'
      },
      chartSettings: {
        key: 'G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb',
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: false,
          mapStyle: {
            styleJson: [
              {
                featureType: 'water',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1'
                }
              },
              {
                featureType: 'land',
                elementType: 'all',
                stylers: {
                  color: '#f3f3f3'
                }
              },
              {
                featureType: 'railway',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'highway',
                elementType: 'all',
                stylers: {
                  color: '#fdfdfd'
                }
              },
              {
                featureType: 'highway',
                elementType: 'labels',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'arterial',
                elementType: 'geometry',
                stylers: {
                  color: '#fefefe'
                }
              },
              {
                featureType: 'arterial',
                elementType: 'geometry.fill',
                stylers: {
                  color: '#fefefe'
                }
              },
              {
                featureType: 'poi',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'green',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'subway',
                elementType: 'all',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'manmade',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1'
                }
              },
              {
                featureType: 'local',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1'
                }
              },
              {
                featureType: 'arterial',
                elementType: 'labels',
                stylers: {
                  visibility: 'off'
                }
              },
              {
                featureType: 'boundary',
                elementType: 'all',
                stylers: {
                  color: '#fefefe'
                }
              },
              {
                featureType: 'building',
                elementType: 'all',
                stylers: {
                  color: '#d1d1d1'
                }
              },
              {
                featureType: 'label',
                elementType: 'labels.text.fill',
                stylers: {
                  color: '#999999'
                }
              }
            ]
          }
        }
      },
      chartSeries: [
        {
          name: '銷售額',
          type: 'scatter', // 散點圖
          coordinateSystem: 'bmap', // 坐標系統 百度地圖
          data: convertData(data),
          encode: {
            value: 2 // 定制value值為資料value陣列中的第三項，下標為2，效果：tooltip上顯示的就是銷售額數值80、100、120
          },
          itemStyle: {
            color: 'purple' // 點的顏色
          },
          symbolSize (value) { // 點的大小
            return value[2] / 10 // 這里的value為每個資料的value陣列，取第三項，縮小10倍
          },
          label: {
            show: false, // 這里設定成false，配合下面的emphasis，效果是滑鼠移入顯示label
            position: 'right',
            // formatter: '{b}' // 默認為value值
            formatter (v) {
              return `${v.data.name} - ${v.data.value[2]}`
            }
          },
          emphasis: {
            label: {
              show: true
            }
          }
        },
        {
          name: 'Top 10',
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          data: convertData(data.sort((a, b) => b.value - a.value)).slice(0, 10),
          encode: {
            value: 2
          },
          symbolSize (value) { // 點的大小
            return value[2] / 10 // 這里的value為每個資料的value陣列，取第三項，縮小10倍
          },
          label: {
            show: true,
            position: 'right',
            // formatter: '{b}'
            formatter (v) {
              return `${v.data.name} - ${v.data.value[2]}`
            }
          },
          hoverAnimation: true,
          rippleEffect: { // 波紋效果
            brushType: 'stroke'
          },
          itemStyle: {
            color: 'purple',
            shadowBlur: 10,
            shadowColor: '#333'
          }
        }
      ]

② 水球圖
v-charts自己提供的

<ve-liquidfill :data="chartData" height="100%" :settings="chartSettings" />

function getColor(value) {
  // return 'rgba(97,216,0,.7)' // 0-0.5綠
  // return 'rgba(204,178,26,.7)' // 0.5-0.8土黃
  // return 'rgba(241,47,28,.7)'  //0.8+ 紅
  // return '#c7c7cb' // 灰
  return value > 0 && value <= 0.5
    ? 'rgba(97,216,0,.7)'
    : value > 0.5 && value <= 0.8
    ? 'rgba(204,178,26,.7)'
    : value > 0.8
    ? 'rgba(241,47,28,.7)'
    : '#c7c7cb'
}
chartData: {
         columns: ['title', 'percent'],
         rows: [{ title: 'rate', percent: 0.4825 }]
      },
chartSettings = {
      seriesMap: {
        rate: {
          radius: '80%',
          label: {
            // 這里不要formatter 顯示的值就是48%
            formatter(value) {
              return `${Math.floor(value.data.value * 100)}%`
            },
            textStyle: {
              fontSize: 36,
              color: '#999',
              fontWeight: 'normal'
            },
            position: ['50%', '50%'], // label的默認位置就是這個，居中的
            insideColor: '#fff' // 水波紋和數字重疊時的顏色
          },
          outline: {
            itemStyle: {
              borderColor: '#aaa4a4',
              borderWidth: 1,
              color: 'none', // 環狀空白的顏色
              shadowBlur: 0,
              shadowColor: '#fff'
            },
            borderDistance: 0
          },
          backgroundStyle: {
            color: '#fff'
          },
          itemStyle: {
            shadowBlur: 0, // 水波紋的陰影
            shadowColor: '#fff'
          },
          amplitude: 8, // 水波浪的振幅
          color: [getColor(this.chartData.rows[0].percent)]
        }
      }
    }

③詞云圖

 <ve-wordcloud
      :data="chartData"
      :settings="chartSettings"
      height="100%"
 ></ve-wordcloud>

chartData: {
        columns: ['name', 'value'],
        rows: [
          {
            name: '馬超',
            value: 100 * Math.random()
          },
          {
            name: '馬超1',
            value: 100 * Math.random()
          },
          {
            name: '馬超2',
            value: 100 * Math.random()
          },
          {
            name: '馬超3',
            value: 100 * Math.random()
          },
          {
            name: '馬超4',
            value: 100 * Math.random()
          },
          {
            name: '馬超5',
            value: 100 * Math.random()
          },
          {
            name: '馬超6',
            value: 100 * Math.random()
          },
          {
            name: '馬超7',
            value: 100 * Math.random()
          },
          {
            name: '馬超8',
            value: 100 * Math.random()
          },
          {
            name: '馬超9',
            value: 100 * Math.random()
          },
          {
            name: '馬超10',
            value: 100 * Math.random()
          }
        ]
      },
      chartSettings: {
        color: [
          'rgba(97,216,0,.7)',
          'rgba(204,178,26,.7)',
          'rgba(245,166,35,.7)',
          'rgba(156,13,113,.7)'
        ]
      }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335158.html

標籤：其他

上一篇：記Vue中appendChild加不上class樣式到解決

下一篇：Vue中的組件，看我就夠了