Vue uses ECharts to implement line charts and pie charts

When developing a backend management project, it is necessary to count the backend user data and display it in the form of line graphs and pie charts. Apache-echarts is used here to meet the requirements.

1. Install echarts and import

npm install echarts --save
 
import * as echarts from 'echarts';

2. Use echarts to implement pie chart

<template>
    <div id="chartPie" class="pie-wrap"></div>
</template>
 
<script>
    import * as echarts from 'echarts';
    require('echarts/theme/macarons');//Introduce the theme export default {
    data() {
      return {
        chartPie: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.drawPieChart();
      })
    },
    methods: {
      drawPieChart() {
        let mytextStyle = {
          color: "#333",                          
          fontSize: 18,                            
        };
        let mylabel = {
          show: true,                 
          position: "right",          
          offset: [30, 40],             
          formatter: '{b} : {c} ({d}%)',      
          textStyle: mytextStyle
        };
        this.chartPie = echarts.init(document.getElementById('chartPie'),'macarons');
        this.chartPie.setOption({
          title:
            text: 'Pie Chart',
            subtext: 'Purely fictitious',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            data: ['direct access', 'email marketing', 'affiliate advertising', 'video advertising', 'search engine'],
            left:"center",                              
            top:"bottom",                              
            orient:"horizontal",                        
          },
          series: [
            {
              name: 'Access source',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
              data: [
                {value: 335, name: 'Direct access'},
                {value: 310, name: 'Email Marketing'},
                {value: 234, name: 'Alliance Advertising'},
                {value: 135, name: 'Video Ad'},
                {value: 1548, name: 'Search engine'}
              ],
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {           
                emphasis: mylabel
              }
            }
          ]
        });
      }
    }
  }
</script>
 
<style lang='less' scope>
    .pie-wrap{
        width:100%;
        height:400px;
    }
</style>

3. Use echarts to implement line graph

<template>
    <!-- Prepare a DOM with size (width and height) for ECharts -->
    <div id="chartLine" class="line-wrap"></div>
</template>
 
<script>
    import * as echarts from 'echarts';
    require('echarts/theme/shine');//Introduce the theme export default {
    data() {
      return {
        chartLine: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.drawLineChart();
      })
    },
    methods: {
      drawLineChart() {
        this.chartLine = echarts.init(this.$el,'shine');// Initialize the echarts instance based on the prepared dom let option = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['email marketing', 'affiliate advertising', 'video advertising', 'direct access', 'search engine']
            },
            calculable : true,
            xAxis: [
                {
                    type : 'category',
                    boundaryGap : false,
                    axisTick: {
                        show:false
                    },
                    data : ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
                }
            ],
            yAxis: [
                {
                    type : 'value',
                    axisTick: {
                        show:false
                    },
                    name: '(person)'
                }
            ],
            series: [
                {
                    name:'Email Marketing',
                    type:'line',
                    stack: 'total amount',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'Alliance Advertising',
                    type:'line',
                    stack: 'total amount',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'Video Ad',
                    type:'line',
                    stack: 'total amount',
                    data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name:'Direct access',
                    type:'line',
                    stack: 'total amount',
                    data:[320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name:'search engine',
                    type:'line',
                    stack: 'total amount',
                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        // Display the chart using the configuration items and data just specified this.chartLine.setOption(option);
      }
    }
  }
</script>
 
<style lang='less' scope>
    .line-wrap{
        width:50%;
        height:400px;
    }
</style>

4. Basic concepts of echarts

1) echarts instance

Multiple echarts instances can be created in one web page, and multiple charts and coordinate systems can be created in each echarts instance (described by option). Prepare a DOM node (as the rendering container of echarts), and then create an echarts instance on it.

2) Series

A set of values and the graphs they are mapped to. A series contains at least: a set of values, a graph type (series.type), and other parameters about how these data are mapped to a graph.
The series type (series.type) in echarts is the chart type. The series type (series.type) has at least: line (line chart), bar (bar chart), pie (pie chart)

3) Component

There are at least these components in echarts: xAxis (X axis of rectangular coordinate system), yAxis (Y axis of rectangular coordinate system), grid (bottom plate of rectangular coordinate system), dataZoom (data area zoom component), visualMap (visual mapping component), tooltip (prompt box component), toolbox (toolbar component), series (series),...

5.echarts common configuration items and API

1) Title component, including main title and subtitle

title:
    text: 'Pie Chart', // Main title text subtext: 'Purely fictional', // Subtitle text x: 'center',
    textStyle:{//Main title style color: "#333",                          
      fontSize: 18
    },
    subtextStyle:{}, //Subtitle style itemGap: 10, // Spacing between main and subtitles}

2) Legend component

legend: {
    left:"center", //The distance between the legend component and the left side of the container top:"bottom", //The distance between the legend component and the top of the container orient:"horizontal", //The layout direction of the legend list itemGap :20, //The interval between each legend item formatter: function (name) { //Used to format the legend text, supports both string templates and callback functions~~~~
        return 'Legend ' + name;
    },
    icon:'circle', //icon of legend item
    data: [
        {
            icon: 'triangle',
            textStyle: {
              color: 'red'
            },
            name: 'Direct access' 
        },
        'Email Marketing', 'Affiliate Advertising', 'Video Advertising', 'Search Engine'], //Data array of legend}

3) xAxis: the x-axis in the rectangular coordinate system grid

xAxis: [
        {
            type : 'category', // axis type boundaryGap : false,
            axisTick: {//Axis scale related settings show: false
            },
            data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] // Category data}
    ]

4) yAxis The y axis in the rectangular coordinate system grid

yAxis: [
        {
            type : 'value', // axis type, `'value'` numerical axis, suitable for continuous data axisTick: {
                show:false
            },
            name: '(person)'
        }
    ]

5) Tooltip prompt box component

tooltip : {
    trigger: 'axis', //Trigger type, 'axis' axis trigger, mainly used in bar charts, line charts and other charts that use category axes formatter: "{a} <br/>{b} : {c} ({d}%)", //Template variables include `{a}`, `{b}`, `{c}`, `{d}`, `{e}`, which represent series name, data name, data value, etc. respectively}

6) Series list, each series determines its own chart type through type

A. series-line
 
series: [
    {
        name:'Email Marketing',
        type:'line',
        stack: 'total amount',
        data:[120, 132, 101, 134, 90, 230, 210], //Data content array in the series areaStyle:{ //Area fill style color:'red'
        },
        lineStyle:{//line style color:'#000'
        },
        emphasis:{//Graphic highlight style label:{
                color:'red'
            }
        }
    }
]
 
B. series-pie
series: [
    {
      name: 'Access source',
      type: 'pie',
      radius: ['50%', '70%'], //The radius of the pie chart, the first item of the array is the inner radius, the second item is the outer radius center: ['50%', '50%'], //The center (center) coordinates of the pie chart, the first item of the array is the horizontal coordinate, the second item is the vertical coordinate. Supports setting as percentage. When setting as percentage, the first item is relative to the container width, and the second item is relative to the container height roseType: false, //Whether to display as Nightingale chart, distinguishing data size by radius data: [ //Data content array in the series {value: 335, name: 'Direct access'},
        {value: 310, name: 'Email Marketing'},
        {value: 234, name: 'Alliance Advertising'},
        {value: 135, name: 'Video Ad'},
        {value: 1548, name: 'Search engine'}
      ],
      animationEasing: 'cubicInOut', //Easing effect of initial animation animationDuration: 2600, //Duration of initial animation label: {           
        emphasis: mylabel//Highlighted sector and label style}
    }

]

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Draw a pie chart using Python pyecharts
How to achieve the gap between each section of the echarts pie chart
Solve the problem of pie chart label overlap in echarts
Python data visualization library PyEcharts bar chart, pie chart, line chart, word cloud chart common examples detailed explanation
Example of using the Baidu ECharts plugin to draw a pie chart using JavaScript
Example of dynamic loading of Django echarts pie chart data
WeChat applet traverses Echarts chart to realize multiple pie charts
Ajax dynamic assignment echarts example (pie chart and column chart)
Example of adding click events to echarts pie chart sectors
Realizing pie chart effect based on Echarts

<<: Two methods of restoring MySQL data

>>: Detailed explanation of nginx anti-hotlink and anti-crawler configuration