The toolbox of echarts is implemented in the vue project to customize the one-click copy function, and the custom icon ----- detailed explanation

In echarts, there are five official built-in tools for exporting pictures, data views, dynamic type switching, data area scaling, and reset. But to achieve a one-click copy function like this, you need to customize the settings.

Renderings:

 After clicking copy, paste it into notepad like this:

 Implementation steps:

First, install the plug-ins required for replication

npm install vue-clipboard2 --save

2. Inject the plugin globally

Add two sentences in the red frame to main.js:

import VueClipBoard from 'vue-clipboard2'
Vue.use(VueClipBoard)

2. Add the toolbox to the echarts chart configuration, the position is shown in the figure below:

Note: ① The dataView in the figure is the built-in tool data view in the toolbox, myTool1 is a custom copy tool, and the custom name must start with my, such as myTool, myCopyTool, etc.

The following figure is the complete code of the custom tool, followed by a detailed explanation of the function of each attribute

 

1. The icon is the small icon that needs to be displayed. Here I am using a local image. The path of the image is as shown in the figure:

        ①The local picture is written like this: icon: "image:///image/copy.png",

        ②If it is a picture link, write 'image://http://xxx.xxx.xxx/copy.png'

        ③If it is a picture in base64 format, write in this format: 'image://data:copy/png;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6Q'

2. Write the event to be executed after clicking the tool in the onclick function

3. My chart data in the histogram looks like this:

chartData: {
      type: Array,
      default() {
        return [
          {
            name: "a",
            value: 10,
          },
          {
            name: "b",
            value: 20,
          },
          {
            name: "c",
            value: 40,
          },
          {
            name: "d",
            value: 30,
          },
        ];
      },
    },

I processed the data as shown in the figure below. In order to conveniently give the data to the abscissa and ordinate, you need to change according to your actual data:

 

 Note: ①. The dataX_copy and dataY_copy here are the data to be used for copying. The reason why I want to use the data defined in data to re-assign instead of directly using dataX and dataY is because I found during the debugging process that if the data defined in the function is used, the copy will fail when the page is refreshed. You can try it.

②. Also note that the part framed in green needs to assign this to me first (this name can be chosen at will), because the direction of this will change next.

4. Define an aaa character string to splice the content to be copied, where \r\n is for each line of the copied data to have a newline, otherwise it will be a whole line, which is not beautiful when viewed.

me.$copyText is to use the copied plug-in we downloaded in the first step, and put the content we need to copy on the clipboard in brackets

 

This explanation is mainly to realize the function. For more configurations, please refer to the official document: makeapie - ECharts Documentation

 ps: There are a lot of words, and it may be a bit long-winded. . If you have any questions, you can leave a message in the comment area and discuss together