elemefe / v-charts Goto Github PK

更改数据直接赋值chartData.rows，没有效果，需要切换图表chartSettings.type之后，就能正常显示刚刚赋值的数据

bug?fix? line 提供的data为null时希望像echarts为断线 而不是0

The 'lib' folder of v-charts can be found on the unpkg.com, but why it is not open in the repository of github?

需求： 需要展示一个月的数据，但是初始化可展示10个，其他的数据左右滑动显示，但是不要和移动端上下滑动冲突，是否支持

i can't find this prop.

比如我要在饼图上展示

normal:{ 
  label:{ 
    show: true, 
    formatter: '{b} : {c} ({d}%)' 
  }, 
  labelLine :{show:true} 
} 

demo

这样的效果，能否指教下怎么实现？当前用的版本为1.6.8

会考虑加入图表标题吗？

我加了
:dataZoom="chartDataZoom"

this.chartDataZoom = [{
type: 'inside',
start: 86,
end: 100
}, {
start: 0,
end: 7,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '70%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}]

不起作用

我觉得哦，文档上稍微简单介绍一下 V-Charts 到底是做什么，首先有个介绍才会有人继续往下看吧？个人理解

通过post获取数据之后，图表不显示
修改窗口大小之后 才显示出来

The code is:
<ve-line :data="chartData" :height="height" :colors="chartColors" :settings="chartSettings" tooltip-visible :legend-visible="legendVisible" :init-options="initOptions" :after-config="afterConfig"></ve-line>
set the height to be 4rem:
this.height = '4rem'
Then the charts displays confusion in mobile, The inner line chart should not display like this.

Here is my research:

1. the canvas is 4rem, 171px in iphone 5, but the top blank area and the bottom blank area have taken 100px, so the inner line chart's height is 71px.
2. I don't know how to cut the top blank area and the bottom blank area.
   

Here is my code:

<template>  
<div class="container">
    <ve-line :data="chartData" :colors="chartColors" :settings="chartSettings" tooltip-visible :legend-visible="legendVisible" :init-options="initOptions" ></ve-line>
  </div>
</template>
<script>
import VeLine from 'v-charts/lib/line'
module.exports = {
  props: ['headerModel'],
  data () {
    return {
    }
  },
  components: {
    VeLine
  },
  filters: {
  },
  async created () {
    this.chartData = {
      columns: ['日期', '销售量'],
      rows: [
        { '日期': '1月1日', '销售量': 0.123 },
        { '日期': '1月2日', '销售量': 0.1223 },
        { '日期': '1月3日', '销售量': 0.2123 },
        { '日期': '1月4日', '销售量': 0.4123 },
        { '日期': '1月5日', '销售量': 0.3123 },
        { '日期': '1月6日', '销售量': 0.7123 }
      ]
    }
    this.chartColors = ['#ff5959']
    this.chartSettings = {
      yAxisType: ['percent'],
      yAxisColor: '#dadada'
    }
    this.legendVisible = false
    this.initOptions = {
      yAxis: [
        {
          axisLine: {
            lineStyle: {
              color: '#f0f',
              width: 8
            }
          },
          nameTextStyle: {
            color: '#f0f',
            fontSize: 28
          }
        }
      ],
      xAxis: [
        {
          axisLine: {
            lineStyle: {
              color: '#f0f',
              width: 8
            }
          },
          nameTextStyle: {
            color: '#f0f',
            fontSize: 28
          }
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
</style>

I set the nameTextStyle's color and fontSize by initOptions, But it seems not work.

https://elemefe.github.io/v-charts 打不开

具体是我在将v-charts的图表嵌套到Element-UI的Tabs 标签页时，只有第一个标签页能渲染，剩下的display：none的容器里面无法渲染。
我在网上查到资料需要在显示的时候resize一下。
请问需要在什么时机，如何获取v-charts的图表对象进行resize呢？

Result is:

the value is :
"Incomelist": [ {"yield":"0","creattime":"2017-07-05"}, {"yield":"0","creattime":"2017-07-07"}, {"yield":"0","creattime":"2017-07-10"}, {"yield":"0","creattime":"2017-07-11"}, {"yield":"-0.01","creattime":"2017-07-12"}, {"yield":"-0.01","creattime":"2017-07-13"}, {"yield":"-0.01","creattime":"2017-07-14"}]

I think it's a bug that may need to be fixed.

如何把这个白色的小点去掉

Prop "xaxis" is passed to component , but the declared prop name is "xAxis". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "x-axis" instead of "xAxis".
But actually I passed "xAxis"

On the example page https://elemefe.github.io/v-charts/#/radar, if you uncheck some of the elements, the chart re-renders and the elements displayed in the chart change their color. However, this color change is not reflected in the legend.

1. Initially, 1月1日 is green, 1月2日 blue, 1月3日 red, 1月4日 yellow, 1月5日 dark blue and 1月6日 violet.
2. Unselect everything except 1月3日
   --> In the legend, 1月3日 is still red, but in the chart, it's green.

看了下settings，并没有这个配置。没法把曲线由光滑调整至标准直线

元素存在，但需要改动窗口大小，才可以显示图表，求帮忙解决
案例：https://codepen.io/wangyan-g/pen/QMWpWQ?editors=1010

like this :
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#5bcee2', }, { offset: 1, color: '#045d69', }]),

可以手动设置图表的高度吗？^_^

this.chartSettings = {
legend:{
selectedMode:'single',
}
}
在echarts官网示例中能够设置图例的选择模式,可以设置成为单选,但是在我们v-charts中并不支持,我看了一下源码,只有metrics,legendName,legendMap三种才能够修改,
希望能够下版本更新之后加上哈,或者大神告诉我有能够实现的方式

1. scatter
2. effectScatter
3. lines
4. pictorialBar

请问是否支付以上四类图表，如果不支持：

1. 是否有可用的临时解决方案？
2. 大概何时可以支持？

多谢！

很看好这套组件，也用了一段时间。
希望团队有代码review做严格的检查把关。
其它的类似于width，height首次绑定未生效这种问题我就没提了，我只能给你们的组件加个ref，比如就叫chart，然后我this.$refs.chart.echart.resize({})这种在父组件里操控你们写的子组件的方式来做了。
希望你们后续有更多的完善。

版本"v-charts": "^1.1.2"

Is the width of the bar column customizable?

现在急需在histogram柱形图里显示标签，希望新增的label配置可以尽快发布到npm package上

Ve-histogram cannot set minimum scale，No parameters are set for minimum calibration

通过点击事件，修改了最外层布局，使得margin-left由200 --> 0时，只有div.ve-line采取了width:auto，而.ve-line>div:nth-child(1) 以及 .ve-line div canves并没有自适应，需要强制刷新浏览器才有效果。那么在封装好的ve-line组件中能否自己去触发重绘？

默认是这样

横屏后

然后这个时候再横屏回来

就会出现绘制超出边界的问题

我的数据是用定时器每隔1秒添加进去，显示不成功，数据没有问题

    <el-row>
        <el-col :span="24">
            <div v-if="chart_type_value == '折线图'">
                <ve-line :data="chartData"  tooltip-visible legend-visible></ve-line>
            </div>
            <div v-else>
                <ve-pie :data="chartData" :settings="chartSettings" :height="600px" tooltip-visible legend-visible></ve-pie>
            </div>
        </el-col>
    </el-row>

渲染后的html

控制台无异常输出，浏览器 Google Cheome Version 59.0.3071.115 (Official Build) (64-bit)

您好:
我在vue-cli项目里面
webpack.prod.js
plugins:[
new webpack.optmize.CommonsChunkPlugin({
name:[ 'v-charts' ]
})
]
webpack.base.config.js
entrt:{
'v-charts':['v-charts']
}
我这样打包出来了v-charts.hashchunk.js有690K 而单独引用一个图标组件的时候是240K
这样是正常的吗?

非常感谢饿了么团队为vue生态做的贡献，你们的ElementUI真的为我们带来了很多的便利。
最近我们在做图表控件的选型，在vue-echarts，vue-echarts-v3和v-charts之间徘徊。我想问的是：

1. v-charts支持配置全局主题吗？类似于Echarts.registerTheme(json)
2. Echarts的灵活性很高，可配置参数非常多，v-charts支持的配置参数是不是全部能覆盖到呢？

非常希望能得到你们的回复，谢谢。

在移动端引入图表，好多图表无法显示
注入 折线图 柱状图 等一些图表无法在uc浏览器，QQ浏览器等安卓手机上的浏览器上无法显示

这里的legend可以改变字体颜色吗？或者是中间那个白色小圆球可以改成透明色吗？

报错内容

Object {__ob__: Observer}
zfb_querystats.js:48 Object {legend: Object, yAxis: Array(2), series: Array(2), xAxis: Array(1), tooltip: Object}
vue.esm.js:434 [Vue warn]: Error in nextTick: "TypeError: Cannot use 'in' operator to search for '�_ec_inner' in undefined"

found in

---> <VeHistogram>
       <ZfbQuerystatsHome> at /Users/guojingwen/svn-code/dsb/vuejs/src/apps/querystats/home.vue
         <ZfbQuerystats> at /Users/guojingwen/svn-code/dsb/vuejs/src/apps/querystats/index.vue
           <ZfbApplication> at /Users/guojingwen/svn-code/dsb/vuejs/src/apps/commons/application.vue
             <Anonymous>
               <Root>
warn @ vue.esm.js:434
handleError @ vue.esm.js:519
(anonymous) @ vue.esm.js:657
nextTickHandler @ vue.esm.js:602
vue.esm.js:523 TypeError: Cannot use 'in' operator to search for '�_ec_inner' in undefined
    at ExtendedClass.setOption (zfb_querystats.js:26622)
    at ECharts.webpackJsonp.613.echartsProto.setOption (zfb_querystats.js:1437)
    at VueComponent.dataHandler (zfb_querystats.js:428)
    at VueComponent.boundFn [as dataHandler] (vue.esm.js:164)
    at VueComponent.init (zfb_querystats.js:444)
    at VueComponent.boundFn [as init] (vue.esm.js:165)
    at VueComponent.<anonymous> (zfb_querystats.js:460)
    at Array.<anonymous> (vue.esm.js:655)
    at nextTickHandler (vue.esm.js:602)
    at <anonymous>
handleError @ vue.esm.js:523
(anonymous) @ vue.esm.js:657
nextTickHandler @ vue.esm.js:602

下面是我的代码

<template>
  <div class="page-querystats-home">
    <h2>查询统计home页</h2>
    <hr>
    <h2>条形图</h2>
    <div class="am-tab" role="tablist">
      <a class="am-tab-item" role="tab" v-for="(text, index) in chart1" :class="{selected: index1 === index}" @click="getArea(index);">{{text}}</a>
    </div>
    <VeHistogram
      ref="chart"
      legend-position="bottom"
      :before-config="beforeConfig"
      :after-config="afterConfig"
      :data="chartData.data"
      :settings="chartData.settings">
    </VeHistogram>
    <hr>
  </div>
</template>

<script>
// import VCharts from '../../components/charts';
import VeHistogram from 'v-charts/lib/histogram';

export default {
  name: 'zfb-querystats-home',
  data () {
    return {
      index1: 0,
      days: 50,
      chart1: [
        '最近7天',
        '最近30天',
        '所有'
      ],
      chartData: []
    };
  },
  created () {
    this.chartData = {
      name: '柱状轴配置图',
      data: {
        columns: ['日期', '缴款金额', '缴款笔数'],
        rows: [
          { '日期': '1-1', '缴款金额': 123, '缴款笔数': 3 },
          { '日期': '1-2', '缴款金额': 1223, '缴款笔数': 6 },
          { '日期': '1-3', '缴款金额': 2123, '年缴款笔数龄': 9 },
          { '日期': '1-4', '缴款金额': 4123, '缴款笔数': 12 },
          { '日期': '1-5', '缴款金额': 3123, '缴款笔数': 15 },
          { '日期': '1-6', '缴款金额': 7123, '缴款笔数': 20 }
        ]
      },
      settings: {
        yAxisName: ['缴款金额', '缴款笔数'],
        axisSite: {
          right: ['缴款金额']
        }
      }
    };
  },
  components: {
    VeHistogram
//    VeHistogram (resolve, reject) {
//      VCharts.VeHistogram.then(val => {
//        resolve(val);
//      });
//    }
  },
  
  methods: {
    beforeConfig (data) {
      console.log(data);
    },
    afterConfig (data) {
      console.log(data);
    },
    getArea (index) {
      if (index === 2) {
        console.log(1234);
        this.chartData.data.rows.shift();
        this.chartData.data.rows.push({'日期': '1-7', '缴款金额': 6823, '缴款笔数': 18});
        this.$refs.chart.echarts.setOption(this.chartData.data);
      }
    }
  }
};
</script>

首先十分感谢 v-charts ，为广大 Vue 开发者提供了遍历，谢谢！

开发时遇到一个 warn，一直没找到原因：
vue.esm.js?65d7:434 [Vue warn]: Error in callback for watcher "data": "TypeError: Cannot read property 'setOption' of undefined"

图表不支持 南丁格尔玫瑰图 多圆饼呢 这样子免得去多次做配置来实现呢！

Why can't the values in columns change dynamically based on selection?
When the value in columns changes, the legend above does not change, and the data renders an error

如，http://echarts.baidu.com/echarts2/doc/example/event.html
谢谢啦

打算拿这个图标，导出为jpg，然后迁入到word中。请问，有导出jgp或其他格式的接口么？

Ve-bar gets data on how to go from small to large or from large to small