Documents:
V-ChartsVue2 + ECharts based chart component

When using ECharts to develop chart components, we often need to go back and forth between data and configuration items. Simple charts can be acceptable to modify, but for complex requirements, every change to the chart can be painful. In order to free ECharts chart development from tedious data type conversion and modification of complex configuration items, we packaged V-Charts components based on Vue2 and ECharts. We only need to provide a unified data format friendly to both the front and back end, and then set simple configuration items. You can easily generate common charts. Here’s an example of how to do this.

The installation

npm i v-charts -S
Copy the code

To get started

<template> <div> <ve-line :data="chartData" :settings="chartSettings"></ve-line> </div> </template> <script> import VeLine from 'V-charts /lib/line' export default {data () {return {chartData: {columns: [' date ',' balance ', 'ratio '], rows: [{' date ':' January 1 ', 'balance', 123, 'ratio: 0.3}, {' date' : 'January 2', 'balance', 1223, 'ratio: 0.6}, {' date' : 'January 3', 'balance', 2123, 'ratio' : 0.9}, {' date ':' on January 4, 'balance', 4123, 'ratio: 0.12}, {' date' : 'January 5', 'balance', 3123, 'ratio: 0.15}, {' date' : 'January 6', 'balance' : ChartSettings: {}} components: {VeLine}} </script>Copy the code

Effect:

The data format used by V-Charts is as shown in the code above. To make the configuration items more concise, we default to using the first value in the Columns array as the dimension and the following value as the indicator. Generating a basic line chart is as simple as that. A better way to display the ratio data would be to put the ratio data on a different axis and add a percentage sign. To do this, simply change the chartSettings content to:

ChartSettings: {axisSite: {right: [' ratio ']}, yAxisType: ['normal', 'percent']}Copy the code

Effect:

&amp; amp; amp; lt; img src=”https://pic1.zhimg.com/v2-2b96b1a7b15bcef917abc417b157b818_b.png” data-rawwidth=”519″ data-rawheight=”369″ class=”origin_image zh-lightbox-thumb” width=”519″ data-original=”https://pic1.zhimg.com/v2-2b96b1a7b15bcef917abc417b157b818_r.png”&amp; amp; amp; gt; Of course, you may have additional ideas about the color of the diagram, or you may want to hide the prompt box, legend, etc., which can be easily done by adding properties to the component.

<ve-line
  :data="chartData"
  :colors="['#87a997', '#d49ea2', '#5b4947']"
  :legend-visible="false"
  :tooltip-visible="false"
  :settings="chartSettings">
</ve-line>
Copy the code



About attribute

As shown in the sample code above, we use the data attribute to represent the data for the chart, and Settings as the display state configuration for the chart. Settings contains the specific chart configuration, and colors, Tooltip-Visible, and so on, all charts have configuration. Are placed directly on the component. For details about configuration items, refer to the documentation.

If you have some other custom needs for your Charts, V-Charts provides an after-Config hook that allows you to directly modify the content of the internally generated configuration items, putting all control in your hands. If you need to bind events to a chart, you can also do so directly in the Events property.

conclusion

Unlike Justineo/ VuE-Echarts, V-Charts directly encapsulates the echarts configuration item generation logic inside the component, avoiding the need for developers to generate complex configuration items directly. Furthermore, V-Charts handles the packaging of Echarts internally, introducing only corresponding modules for each chart, ensuring that the resulting code volume is minimal.

In daily business development, we support 8 kinds of Charts and some common configurations according to common scenarios of E-Charts. Next, we are going to add more charts to the mix and optimize the configuration options to provide a better experience for chart developers.