在VUE项目中使用Echarts简单实现折线图、柱状图、饼图_vue 折线图

1、首先下载echarts包

npm i echarts --save
1

2、在main.js中全局引入echarts包，挂载到vue实例上

import * as echarts from "echarts";
Vue.prototype.$echarts = echarts
1
2

3、在vue单页面上使用echarts

• 3.1实现折线图和柱状图

在vive层

//必须设置宽和高
 <div id="main" style="width:400px;height:300px;"></div>
1
2

获取echarts对象

 getmain() {
	//获取echarts对象 
    let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
      //表头
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {}, //提示
        legend: {
          //图例
          data: ["销量"] //对应series每一项中的name
        },
        xAxis: {
          //x轴显示内容
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {}, //y轴默认
        series: [
          //数据1  柱形
          {
            name: "销量",
            type: "bar", //类型  柱形
            data: [5, 20, 36, 10, 10, 20] //柱形的点
          },
          //数据2  折线
          {
            name: "折线",
            type: "line", //类型 折线
            smooth: true, //是否是弯曲的折现  弯弯曲曲
            itemStyle: {
              //折线样式
              /*设置折线颜色*/
              normal: {
                color: "#c4cddc"
              }
            },
            data: [5, 20, 36, 10, 10, 20] //折线的点
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      //定时器主要实现数据的变化echarts的重新渲染
      //删除数据第一项 在最后加一项 
      setInterval(function() {
        var data0 = option.series[0].data;
        option.series.map(item => {
          item.data.shift();
          item.data.push(Math.round(Math.random() * 39 + 1));
        });
        myChart.setOption(option);
      }, 2000);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

• 3.2实现饼图

 <div id="main1" style="width:400px;height:300px;"></div>
1

 getmain1() {
      let myChart = this.$echarts.init(document.getElementById("main1"));
      let option = {
        backgroundColor: "#2c343c",  背景色
        title: {  //标题配置
          text: "Customized Pie",
          left: "center",
          top: 20,
          textStyle: {
            color: "#f00"
          }
        },

        tooltip: {  //提示框显示
          trigger: "item", //当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。
          formatter: "{a} <br/>{b} : {c} ({d}%)" //系列名  数据项变量名  数据值   百分比
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        legend: {  //图例
          orient: "vertical", //纵向显示
          x: "left",
          textStyle: {
            color: "#f00"
          },
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
        },
        series: [  //数据
          {
            name: "访问来源",
            type: "pie",  //饼图
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 274, name: "联盟广告" },
              { value: 235, name: "视频广告" },
              { value: 400, name: "搜索引擎" }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),  //按照value值从小到大排序
            roseType: "radius",
            label: {
              color: "rgba(255, 255, 255, 0.3)"
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      };
      setInterval(function() {
        var data0 = option.series[0].data.sort(function(a, b) {
          return a.value - b.value;
        });
        // { value: 335, name: "直接访问" }
        let name = data0.shift();
        data0.push({
          value: Math.round(Math.random() * 400 + 1),
          name: name.name
        });
        option.series[0].data = data0.sort(function(a, b) {
          return a.value - b.value;
        });
        myChart.setOption(option);
      }, 2000);
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

• 3.3实现折线图

 <div id="main2" style="width:400px;height:300px;"></div>
1

getmain2() {
      let myChart = this.$echarts.init(document.getElementById("main2"));
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        legend: {},
        toolbox: { //工具栏
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        tooltip: {
          trigger: "axis" //显示当前列的所有信息
        },
        yAxis: {
          type: "value"
        },
        series: [
        //数据   五条折线数据  line 折线
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          },
          {
            data: [11, 22, 33, 44, 55, 66, 77],
            type: "line"
          },
          {
            data: [111, 222, 333, 444, 555, 666, 777],
            type: "line"
          },
          {
            data: [711, 622, 533, 444, 355, 266, 177],
            type: "line"
          },
          {
            data: [611, 422, 533, 644, 755, 666, 177],
            type: "line"
          }
        ]
      };

      setInterval(function() {
        option.series.map(item => {
          item.data.shift();
          return item.data.push(parseInt(Math.random() * 1500));
        });
        myChart.setOption(option);
      }, 2000);
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

• 3.4实现多重饼图

<div id="main3" style="width:500px;height:500px;"></div>
1

  getmain3() {
      let charts = document.getElementById("main3");
      let myChart = this.$echarts.init(charts);
      let color = ["#FF8700", "#ffc300", "#00e473", "#009DFF", "#0034ff"];
      let placeHolderStyle = {
        normal: {
          // 设置扇形的阴影
          shadowBlur: 90,
          shadowColor: "rgba(255,227,42,1)",
          shadowOffsetX: -2,
          shadowOffsetY: 10,
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      };
	//每一个环的数据
      let data0 = [
        {
          name: "户型图比例",
          type: "pie",
          roundCap: true,
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [155, 175],//
          itemStyle: placeHolderStyle,
          data: getData()
        },
        {
          name: "钥匙率",
          type: "pie",
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [130, 150],
          itemStyle: placeHolderStyle,
          data: getData()
        },
        {
          name: "委托率",
          type: "pie",
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [105, 125],
          itemStyle: placeHolderStyle,
          data: getData()
        },
        {
          name: "经理陪看率",
          type: "pie",
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [80, 100],
          itemStyle: placeHolderStyle,
          data: getData()
        },
        {
          name: "实勘率",
          type: "pie",
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [180, 200],
          itemStyle: placeHolderStyle,
          label: {
            normal: {
              show: false
            }
          },
          data: getData()
        }
      ];

      function getData(percent) {
        percent = Math.random() * 1;
        return [
          {
            value: percent,
            name: percent
            // itemStyle: {
            //      normal: {
            //              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                         offset: 0,
            //                         color: '#00B2EE'
            //                     }, {
            //                         offset: 1,
            //                         color: '#00DDE6'
            //                     }])
            //     }
            // }
          },
          {
            value: 1 - percent,
            itemStyle: {
              normal: {
                color: "transparent"
              }
            }
          }
        ];
      }

      let option = {
        backgroundColor: "#0E2A43",
        color,

        tooltip: {
          trigger: "item",
          formatter: function(params, ticket, callback) {
            return params.seriesName + ": " + params.name * 100 + "%";
          }
        },
        legend: {
          top: "15%",
          left: "20%",
          itemHeight: 18,
          data: ["户型图比例", "实勘率", "委托率", "经理陪看率", "钥匙率"],
          textStyle: {
            color: "#fff",
            fontSize: "100%"
          },
          // selectedMode: true,
          orient: "vertical"
        },
        series: data0
      };
      setInterval(function() {
        let data = option.series;
        data.map(item => {
          item.data = getData();
        });
        myChart.setOption(option);
      }, 2000);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

上面的例子都在mounted挂载完成时调用

 mounted() {
    //条形
    this.getmain();
    //饼图
    this.getmain1();
    //折线图
    this.getmain2();
    //dingtu
    this.getmain3();
  }
1
2
3
4
5
6
7
8
9
10

例子都是在echarts中摘录