学习v-charts的一些心得

2020-06-02 15:07:53 阅读：703 来源： 互联网

官网地址：https://v-charts.js.org/#/start

1.npm安装

npm i v-charts echarts -S

2.引入

import VCharts from 'v-charts'
Vue.use(VCharts)

或者单个引入

import VeLine from 'v-charts/lib/line.common'
Vue.component(VeLine.name, VeLine)

3.套入代码，如：

<template>
  <ve-line :data="chartData"></ve-line>
</template>

<script>
  export default {
    data: function () {
      return {
        chartData: {
          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 }
          ]
        }
      }
    }
  }
</script>

4.配置（配置颜色）

<template>
  <ve-line :extend="chartExtend"  :data="chartData" :settings="chartSettings" height="240px"></ve-line>
</template>


this.chartExtend = {
      series: {
        color: "#33ABFB" //柱子背景颜色
        // label: {
        //   show: true,
        // //   position: "top",
        //   textStyle: {
        //     color: "rgb(126, 203, 224)"
        //   }
        // }
      },
      xAxis: {
        axisLabel: {
          textStyle: {
            color: "#fff" //x轴字体颜色
          }
        }
      },
      yAxis: {
        axisLabel: {
          textStyle: {
            color: "#fff" //y轴字体颜色
          }
        }
      },
      legend: {
        textStyle: {
          color: "#fff" //图例字体颜色
        }
      }
    };

　　参考：https://www.cnblogs.com/xlfdqf/p/11428048.html

水球图的配置

<template>
  <ve-liquidfill :settings="chartSettings" :data="chartData" style="top: -70px;left: -50px;" height="250px"></ve-liquidfill>
</template>

this.chartSettings = {
        seriesMap: {
          '负载状态': {
            color: ['#1890FF','#91D5FF'],
            itemStyle: {
            //   opacity: 0.2
            },
            emphasis: {
            //   itemStyle: {
            //     opacity: 0.8
            //   }
            },
            backgroundStyle: {
              color: 'rgba(13,25,89,1)'
            },
            label: {
              formatter (options) {
                const {
                  seriesName,
                  value
                } = options
                return `${seriesName}\n${value * 100}%`
              },
              fontSize: 18,
              color: '#fff',
              fontWeight: 400
            //   insideColor: '#fff'
            }
          }
        }
      };

标签：访问,color,charts,学习,单用户,下单,fff,心得
来源： https://www.cnblogs.com/wu2020/p/13031258.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

学习v-charts的一些心得