vue3引入echarts 和 vue-echarts饼状图、折线图、柱状图等附源码、效果图

ECharts官网：Apache ECharts

1、在终端引入：

npm install echarts --save

2、创建一个后缀为.vue的文件，并在此文件中引入

import * as echarts from 'echarts';

3、在Examples - Apache ECharts 中选择自己需要的实例，如图选择。复制后按自己需求改动

1.  
   //初始化
2.  
   var myChart = echarts.init(document.getElementById('container'));

插一个重大发现之右手就会，万能模板！！傻瓜操作！！

1.  
   <template>
2.  
   <div id="container1" ></div>
3.  
   </template>
4.  
   <script>
5.  
   import * as echarts from 'echarts';
6.  
    
7.  
    
8.  
   export default {
9.  
   name:'echart2',
10.  
    mounted() {
11.  
    var myChart = echarts.init(document.getElementById('container1'));
12.  
    myChart.setOption({
13.  
    这里的内容！！！！直接复制下图方框内！！
14.  
    });
15.  
    }
16.  
    }
17.  
    </script>
18.  
    <style>
19.  
     
20.  
    </style>

1.  
   myChart.setOption({
2.  
   title: {
3.  
   text: '标题'
4.  
   },
5.  
   //右上角下载
6.  
   toolbox: {
7.  
   feature: {
8.  
   saveAsImage: {}
9.  
   }
10.  
    },
11.  
    //X轴
12.  
    xAxis: [
13.  
    {
14.  
    type: 'category',
15.  
    boundaryGap: false,
16.  
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
17.  
    }
18.  
    ],
19.  
    //Y周
20.  
    yAxis: [
21.  
    {
22.  
    type: 'value'
23.  
    }
24.  
    ],
25.  
    //data是数据的值，type是呈现类型
26.  
    series: [
27.  
    {
28.  
    data: [150, 230, 224, 218, 135, 147, 260],
29.  
    type: 'line'
30.  
    }
31.  
    ]
32.  
    });

上效果图！！！（会动的会动的）

 然后再自己微调一下样式就好了！！贼拉简单

插播结束

4、完整代码来咯

1.  
   <template>
2.  
   <div id="container" style="width: 800px;height:500px;"></div>
3.  
   </template>
4.  
   <script>
5.  
   import * as echarts from 'echarts';
6.  
    
7.  
    
8.  
   export default {
9.  
   name:'test5',
10.  
    mounted() {
11.  
    // 基于准备好的dom，初始化echarts实例
12.  
    var myChart = echarts.init(document.getElementById('container'));
13.  
    // 绘制图表
14.  
    myChart.setOption({
15.  
    title: {
16.  
    text: '学生分数统计图'
17.  
    },
18.  
    toolbox: {
19.  
    feature: {
20.  
    saveAsImage: {}
21.  
    }
22.  
    },
23.  
    xAxis: [
24.  
    {
25.  
    type: 'category',
26.  
    boundaryGap: false,
27.  
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
28.  
    }
29.  
    ],
30.  
    yAxis: [
31.  
    {
32.  
    type: 'value'
33.  
    }
34.  
    ],
35.  
    series: [
36.  
    {
37.  
    data: [150, 230, 224, 218, 135, 147, 260],
38.  
    type: 'line'
39.  
    }
40.  
    ]
41.  
    });
42.  
    }
43.  
    }
44.  
    </script>

5、效果图

这篇好文章是转载于：学新通技术网