echarts的简单使用

关于折线图、饼图、柱状图的常用

文章目录

• 前言
• 一、npm安装echarts并引入？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

echarts官网地址

Apache ECharts

---

一、安装echarts

npm install echarts //安装命令

import * as echart from 'echarts' //在需要的页面引入

 

二、常用图

1.折线图

代码如下（示例）：

<template>
 <div ref="echart"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted(){
//初始化
  	const echarts1 = echarts.init(this.$refs.echarts1)
			var echartsOption = {
				title: {
					text: '折线图'
				},
				// 提示文字
				tooltip: {
					trigger: 'axis'
				},
				// 提示信息
				legend: {
					 legend: {
					    data: ['Email', 'Union Ads', 'Video Ads', 'Direct']
					  },
				},
                //网格偏移
				grid: {
					left: '23%',
					constainLabel: true
				},
				toolbox: {

				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
						name: 'Email',
						type: 'line',
						stack: 'Total',
						data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
						name: 'Union Ads',
						type: 'line',
						stack: 'Total',
						data: [220, 182, 191, 234, 290, 330, 310]
					},
					{
						name: 'Video Ads',
						type: 'line',
						stack: 'Total',
						data: [150, 232, 201, 154, 190, 330, 410]
					},
					{
						name: 'Direct',
						type: 'line',
						// stack: 'Total',
						data: [320, 332, 301, 334, 390, 330, 320]
					},
					{
						name: 'Search Engine',
						type: 'line',
						stack: 'Total',
						data: [820, 932, 901, 934, 1290, 1330, 1320]
					}
				]

			}

			echarts1.setOption(echartsOption)
  

 }

}

<script>

//在数据点显示数值，可以在series里label属性中设置

 option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      label: {
        show: true,
        position: 'bottom',
        textStyle: {
          fontSize: 20
        }
      }
    }
  ]
};

2.饼图

代码如下（示例）：

    // 饼状图
                const echarts3 = echarts.init(this.$refs.echarts3)
                const eachrts3Option = {
                    tooltip: {
                        trigger: "item",
                    },

          //颜色设置
                    color: [
                        "#0f78f4",
                        "#dd536b",
                        "#9462e5",
                        "#a6a6a6",
                        "#e1bb22",
                        "#39c362",
                        "#3ed1cf",
                    ],
                    series: [{
                        data: [{
                                name: '小米',
                                value: 2999
                            },
                            {
                                name: '苹果',
                                value: 5999
                            },
                            {
                                name: 'vivo',
                                value: 1500
                            },
                            {
                                name: 'oppo',
                                value: 1999
                            },
                            {
                                name: '魅族',
                                value: 2200
                            },
                            {
                                name: '三星',
                                value: 4500
                            }
                        ],
                        ,
                        type: 'pie'
                    }],
                }
                echarts3.setOption(eachrts3Option)

---

 

三、柱状图

可以提前准备一份数据

 // 柱状图
        userData: [
          {
            date: '周一',
            new: 5,
            active: 200
          },
          {
            date: '周二',
            new: 10,
            active: 500
          },
          {
            date: '周三',
            new: 12,
            active: 550
          },
          {
            date: '周四',
            new: 60,
            active: 800
          },
          {
            date: '周五',
            new: 65,
            active: 550
          },
          {
            date: '周六',
            new: 53,
            active: 770
          },
          {
            date: '周日',
            new: 33,
            active: 170
          }
        ],

    // 柱状图
                const echarts2 = echarts.init(this.$refs.echarts2)
                const eachrts2Option = {
                    legend: {
                        // 图例文字颜色
                        textStyle: {
                            color: "#333",
                        },
                    },
                    grid: {
                        left: "20%",
                    },
                    // 提示框
                    tooltip: {
                        trigger: "axis",
                    },
                    xAxis: {
                        type: "category", // 类目轴
                        data: userData.map(item => item.date),
                        axisLine: {
                            lineStyle: {
                                color: "#17b3a3",
                            },
                        },
                        axisLabel: {
                            interval: 0,
                            color: "#333",
                        },
                    },
                    yAxis: [{
                        type: "value",
                        axisLine: {
                            lineStyle: {
                                color: "#17b3a3",
                            },
                        },
                    }, ],
                    color: ["#2ec7c9", "#b6a2de"],
                    series: [{
                            name: '新增用户',
                            data: userData.map(item => item.new),
                            type: 'bar'
                        },
                        {
                            name: '活跃用户',
                            data: userData.map(item => item.active),
                            type: 'bar'
                        }
                    ],
                }
                echarts2.setOption(eachrts2Option)