v-charts使用-折线图 扇形图 柱状图 雷达图

菜鸟成长之路

知识小点
1.安装v-charts
npm i v-charts echarts -S
2.全局引用
在main里面引入
import vcharts from ‘v-charts’
Vue.use(vcharts )
v-charts官网地址

代码展示

<template>
  <div>
    <div class="grid col-2">
      <!-- 雷达图 -->
      <el-card>
        <ve-radar :data="radarData" :settings="radarSet"></ve-radar
      ></el-card>
      <!-- 饼图 -->
      <el-card>
        <ve-pie :data="pieData" :settings="pieSet"></ve-pie>
      </el-card>
      <!-- 柱状图堆叠 -->
      <el-card>
        <ve-histogram
          :data="columnarData"
          :settings="columnarSet"
        ></ve-histogram>
      </el-card>
      <!-- 折线图 -->
      <el-card>
        <ve-line
          :data="polylineData"
          :settings="polylineSet"
          :extend="polylineExtend"
        ></ve-line>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      //======== 柱状图数据
      columnarData: {
        columns: ["data", "appDownloads", "appAddUsers", "appUserLogin"],
        rows: [
          {
            data: "1/1",
            appDownloads: 1393,
            appAddUsers: 1093,
            appUserLogin: 100,
          },
          {
            data: "1/2",
            appDownloads: 3530,
            appAddUsers: 3230,
            appUserLogin: 1230,
          },
          {
            data: "1/3",
            appDownloads: 2923,
            appAddUsers: 2623,
            appUserLogin: 0.76,
          },
          {
            data: "1/4",
            appDownloads: 1723,
            appAddUsers: 1423,
            appUserLogin: 0.49,
          },
          {
            data: "1/5",
            appDownloads: 3792,
            appAddUsers: 3492,
            appUserLogin: 0.323,
          },
          {
            data: "1/6",
            appDownloads: 4593,
            appAddUsers: 4293,
            appUserLogin: 0.78,
          },
        ],
      },
      columnarSet: {
        //堆叠
        stack: { columnar: ["appDownloads", "appAddUsers", "appUserLogin"] },
        labelMap: {
          appDownloads: "下载数",
          appAddUsers: "登陆数",
          appUserLogin: "登陆总数",
        },
      },
      // ======================饼图
      pieSet: {
        roseType: "radius",
        labelMap: {
          number: "数字",
          authentication: "认证",
        },
      },
      pieData: {
        columns: ["number", "authentication"],
        rows: [
          { number: "22", authentication: 1393 },
          { number: "32", authentication: 3530 },
          { number: "31", authentication: 2923 },
          { number: "14", authentication: 1723 },
          { number: "15", authentication: 3792 },
          { number: "16", authentication: 4593 },
        ],
      },
      //++++++++++++++++++  雷达图
      radarSet: {
        labelMap: {
          totalRevenue: "总收益",
          incomeOne: "收益1",
          incomeTwo: "收益2",
          incomeThree: "收益3",
        },
        areaStyle: {
          //   type: "default",
          opacity: 0.8,
        },
      },
      radarData: {
        columns: [
          "date",
          "incomeOne",
          "incomeTwo",
          "incomeThree",
          "totalRevenue",
        ],
        rows: [
          {
            date: "1/1",
            incomeOne: 1393,
            incomeTwo: 1093,
            incomeThree: 0.32,
            totalRevenue: 191,
          },
          {
            date: "1/2",
            incomeOne: 3530,
            incomeTwo: 3230,
            incomeThree: 0.26,

            totalRevenue: 161,
          },
          {
            date: "1/3",
            incomeOne: 2923,
            incomeTwo: 2623,
            incomeThree: 0.76,
            totalRevenue: 131,
          },
          {
            date: "1/4",
            incomeOne: 1723,
            incomeTwo: 1423,
            incomeThree: 0.49,
            totalRevenue: 131,
          },
          {
            date: "1/5",
            incomeOne: 3792,
            incomeTwo: 3492,
            incomeThree: 0.323,
            totalRevenue: 321,
          },
          {
            date: "1/6",
            incomeOne: 4593,
            incomeTwo: 4293,
            incomeThree: 0.78,
            totalRevenue: 221,
          },
        ],
      },
      // ==============折线图
      polylineSet: {
        metrics: ["访问用户", "下单用户"],
        dimension: ["日期"],
      },
      polylineData: {
        columns: ["日期", "访问用户", "下单用户", "下单率"],
        rows: [
          { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 },
        ],
      },
      polylineExtend: {
        yAxis: {
          //是否显示y轴线条
          axisLine: {
            show: true,
          },
          // 线条位置
          position: "left",
        },
        xAxis: {
          axisLabel: {
            rotate: 45, //x轴的文字倾斜(范围：-90~90)
          },
          axisLine: {
            show: true,
          },
          boundaryGap: false, // 不留白，从原点开始
        },
        //显示指标数
        // series: {
        //   label: {
        //     normal: {
        //       show: true,
        //     },
        //   },
        // },
      }
    };
  },
  /* 组件 */
  components: {},
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},
  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},
  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},
  /* methods则必须要有一定的触发条件才能执行 */
  methods: {},
  /* 观察Vue实例上的数据变动 */
  watch: {},
};
</script>
<style lang='' scoped>

</style>

效果展示