v-echarts的介绍及使用

当我们在项目中做一些数据可视化的时候 很多人都很被动 第一反应就是百度 大多给的就是echarts 这时候肯定会很兴奋 因为找到了数据可视化的插件了 但是 当你打开的时候 看官方给的api 这时你又是一种无比痛苦的表情 因为你看不懂 找不到东和西  这时候 v-echarts杀出来了 

v-echarts 是饿了么团队开源的基于Vue和Echarts的图标工具 他就是为了解决echarts生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项的痛点  v-echarts只需要统一提供一种对前后端都友好的数据格式 设置简单的配置项，便可轻松生成常见的图表。

官方AIP v-charts

后期发现还有一个基于echarts开源封装的组件库 里面都是写好的案例 可以拿过来直接用 https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

地址变更了 https://www.makeapie.com/explore.html

<template>
 <div>
  <ve-ring :data="chartData" :settings="chartSettings" :extend="chartExtendRound" :legend="legend"></ve-ring>
 </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    this.chartSettings = {
        dimension: '日期',
        metrics: '访问用户'
      }
      return {
        chartData: {
          columns: ['日期', '访问用户'],
          rows: [
            { '日期': '0级', '访问用户': 1393 },
            { '日期': '1级', '访问用户': 3530 },
            { '日期': '2级', '访问用户': 2923 },
            { '日期': '3级', '访问用户': 1723 },
            { '日期': '4级', '访问用户': 3792 },
            { '日期': '5级', '访问用户': 4593 },
          ]
        },
        chartExtendRound:{
          series:{
            itemStyle: {
              normal:{
                color:function(params) {
                  //自定义颜色
                  var colorList = [
                    '#f25944', '#10c0ff', '#dcca36', '#1886ff', 'red','yellow'
                  ];
                  return colorList[params.dataIndex]
                }
              }
            },
            labelLine: {
              length: 10,
              length2: 10,
              lineStyle: {
                color: 'red'
              }
            }
          }
        },
        legend: [
          {
            right: 500,
            top: 100,
            textStyle: { color: "red" },
            itemGap: 25,
            itemWidth: 10,
            itemHeight: 10,
            orient: "vertical" // 'vertical'
          }
        ]
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

虽然说配置项很简单了  但是 官方aip里面没有具体介绍这些aip 还是要参考echarts的配置项手册 具体自己查看吧https://www.echartsjs.com/zh/option.html#title