v-charts

Posted on 2020-03-13 Edited on 2024-11-19 In Vue Waline:

Echarts is a tool provided by Baidu for quickly drawing charts on the web. It draws charts in canvas through js, so as long as your project can support js, you can use echarts.

Echarts has a rich and detailed doc that allows us to customize the chart style we like. But this blog is mainly about how to use v-charts in vue projects.

V-charts is a encapsulation of echarts. While retaining all the original settings of echarts, we can make our code style closer to vue, rather than being completely JS code like native echarts.

However, I encountered some problems during use, mainly because the doc of v-charts is somewhat vague. Here is a record of the problems encountered.

First, give the doc of both

Echarts文档， v-charts文档

Overview of the use of three-point configuration items

For the doc of v-charts, my biggest doubt is how it combines so many configuration items in echart. In the chart properties section of the doc of v-chart, it simply explains a few properties that it encapsulates, and all other properties are brushed aside, saying that we can go to the doc of echarts, but how to set it without encapsulation Properties are not clear, here is a summary.

[Attribute] (https://v-charts.js.org/#/props?id= public attribute)

Properties that all charts have, such as width, events, etc.

1	<ve-line :data="chartData" width="100px" :events="chartEvents"></ve-line>

[Basic Attributes] (https://v-charts.js.org/#/props?id= Basic Attributes)

Configuration	Introduction	Type	Default
data	data,参考文档	object	-
settings	configuration items	objects	-
width	width	string	auto
height	height	string	400px
events	event binding,参考文档	object	-
init-options	init additional parameters,参考文档	object	-
tooltip-visible	whether to display a prompt box	boolean	true
legacy-visible	whether to show legend	boolean	true
theme	custom theme	object	-
theme-name	custom theme name	string	-
judge-width	Whether to handle width issues when generating charts	boolean	false
width-change-delay	container width change delay	number	300
resizeable	whether to handle window resize event	boolean	true
cancel-size-check	whether to disable container detection when resize	boolean	false
resize-delay	delay for window resize event callback	number	200
change-delay	property modification delay to trigger chart redraw callback	number	0
set-option-opts	echarts the second argument of setOption, 参考文档	boolean object	true
not-set-unchange	properties that do not participate in setOption when no changes have occurred	array	-
log	Print internally generated echarts options in Console	boolean	false

The above content comes from the doc of v-charts, which means that these properties can be set directly on the component through the unique two-way binding method of vue.

One thing to note, what can be set in ** settings is also encapsulated by v-charts. You need to check the corresponding chart of each type in the v-charts doc to know what properties can be set for this type of chart. **

[extend

In order to be able to more convenient to set the property configuration items, etc., can be configured by the extended property to achieve a separate set of internal properties, extend to the object type, the object property can be a function, can also be an object, it can also be other types of values

When the property is function, the return value of the function is set
When the property is an object, if the corresponding property in options is an object (eg: tooltip) or an array containing objects (eg: series), the corresponding configuration will be merged, otherwise the corresponding configuration will be overwritten directly

For specific usage methods, please refer to the property configuration.示例

[echarts

The properties corresponding to the echarts configuration item are also added to the component to directly override the original corresponding properties of the options. Please refer to the usage method.文档

grid: [object, array],
colors: array,
visualMap: [object, array],
dataZoom: [object, array],
toolbox: [object, array],
title: object,
legend: [object, array],
xAxis: [object, array],
yAxis: [object, array],
radar: object,
tooltip: object,
axisPointer: object,
brush: [object, array],
geo: object,
timeline: [object, array],
graphic: [object, array],
series: [object, array],
backgroundColor: [object, string],
textStyle: object,
animation: object

If an attribute does not take effect after being added, it is likely that the corresponding module has not been introduced. You can refer to this for the location of the module.文件

These two parts of the doc will give us a misleading, that is, we can bind an extend and an options to the chart component, but this is not the case. ** All the properties mentioned in these two parts are bound by “: extend” **, such as:

<ve-line :extend="extend"></ve-line>

<script>
export default {
	data () {
		return {
			extend: {
				grid: [object, array]
			}
		}
	}
}
</script>

** The last point, and the deepest hidden point, in the echarts doc, some properties are neither extended nor written in the setting doc of v-charts **, these are the properties specified in the series in the echarts doc, such as Line charts, the properties in echarts are specified in这里These properties can also be set to take effect in settings.series.

A few examples

Here are only two examples of settings that cannot be found directly in the v-charts doc. You can set the split line style of the line chart, the fill surface style, and the gradual change color style of the column chart. After proficiency, combined with v-charts, the echarts doc can Quickly configure various properties.

line

lineChartSetting: {
        Area: true,//fill below the polyline
        scale: [true],
        lineStyle: {
          Color: '#52B8DF'//The color of the polyline
        }
      },
      extend: {
        series: {
          Symbol: 'none',//do not show inflection points on this line
          areaStyle : { // set the style of the filled part below the polyline to transition color
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(82, 184, 223,0.4)'
                },
                {
                  offset: 1,
                  color: 'rgba(82, 184, 223,0.1)'
                }
              ],
              globalCoord: false
            }
          }
        },
        legend: {
          Show: false//do not show legend
        },
        tooltip: {
          Show: true//Do not display detailed information when mouse hover
        },
        YAx is : { // y-axis style
          splitLine: {//y-axis splitLine style
            Show: true,//show the dividing line
            lineStyle: {
              Color: ['rgba (82, 184, 223, 0.2 )'] // dividing line color
            }
          },
          axisLabel: {
            Color: '#52B8DF'//The font color of the y-axis scale
          }
        },
        xAxis: {
          axisLabel: {
            color: '#52B8DF'
          }
        }
      }

histogram

this.chartSettings = {
      Metrics: ['Visiting user', 'Order user'],
      Dimensions: ['date'],
      itemStyle : { // histogram Colour gradual change
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(3, 252, 173,0.5)' },
              { offset: 1, color: 'rgba(3, 252, 173,0.1)' }
            ]
          )
        }
      }
    };
    this.extend = {
      yAxis: {
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(255, 255, 255, 0.2)']
          }
        },
        axisLabel: {
          color: '#52B8DF'
        }
      },
      xAxis: {
        axisLabel: {
          color: '#52B8DF'
        }
      }
    };