VUE使用echart实现柱状图、折线图、饼图、地图、仪表盘

引入echarts

1.main.js中引入

import echarts from 'echarts'
// 全局方法挂载
Vue.prototype.echarts = echarts

2.package.json设置版本

 "dependencies": {
 	"echarts": "^4.2.1",
 }

3.局部引用：在需要的页面引入

const echarts = require("echarts");

柱状图

1.创建容器div（必须指定高度）

<div style="height: 400px; width: 600px; display: inline" ref="chartAge"></div>

2.js渲染实现

initCharts1Age() {
      let myChart = echarts.init(this.$refs.chartAge); //chartAge与上面的名称一致
      myChart.setOption({
        title: "", //标题
        tooltip: {}, //附表图
        xAxis: { //x轴数据
          name: "", //x轴单位
          type: "", //x轴类型 *横向柱状图时
          data: [
            "10岁以下",
            "10-24岁",
            "25-34岁",
            "35-44岁",
            "45-54岁",
            "55-64岁",
            "65岁以上",
          ],
          axisTick: {
            alignWithLabel: true, //展示x轴
          },
        },
        yAxis: {}, //type: "category", //增加这一行代码，即可柱状图横置,同时坐标单位data也要放入
        series: [ //echart数据
          {
            type: "bar", //echart类型：柱状图bar、折线图line、饼图pie、地图map
            data: [2500, 3000, 3500, 4000, 4500, 3000, 4000],
            itemStyle: { //数据的样式
              normal: { //统一样式
                color: "blue",
              },
            },
            barWidth: "20px", //柱状图的宽度
          },
        ],
      });
    },

3.初始化加载

mounted() {
    this.$nextTick(() => {
    	this.initCharts1Age();
    });
  },

折线图

<div style="height: 400px" ref="chart2"></div>

//折线图
    initCharts2() {
      let myChart = echarts.init(this.$refs.chart2);
      myChart.setOption({
        title: "",
        tooltip: {},
        xAxis: {
          data: [
            "2020-12-31",
            "2020-01-02",
            "2020-01-04",
            "2020-01-06",
            "2020-01-08",
            "2020-01-10",
            "2020-01-12",
            "2020-01-14",
          ],
        },
        yAxis: {
        },
        //图例
        legend: {
          x: "right", //图例位置
          y: "top", //图例位置
          data: ["标准线", "健康值"], //图例data必须与数据name一致
        },
        series: [
          //虚线
          {
            name: "标准线",
            type: "line",
            symbolSize: 4, //拐点圆的大小
            color: ["blue"], //折线条的颜色
            data: [62, 50, 58, 60, 50, 52, 50, 55],
            smooth: false, //关键点，为true是不支持虚线的，实线就用true
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "dotted", //'dotted'虚线 'solid'实线
                },
              },
            },
          },
          //实线
          {
            name: "健康值",
            type: "line",
            symbol: "circle",
            symbolSize: 4,
            itemStyle: {
              normal: {
                color: "blue",
                borderColor: "blue", //拐点边框颜色
              },
            },
            data: [41, 42, 43, 40, 45, 46, 48, 41],
          },
        ],
      });
    },

mounted() {
    this.$nextTick(() => {
    	this.initCharts2();
    });
  },

饼图

<div style="height: 400px" ref="chartEducation"></div>

//教育程度
    initCharts4sEducation() {
      let myChart = echarts.init(this.$refs.chartEducation);
      myChart.setOption({
        title: "",
        tooltip: {},
        legend: {
          orient: "horizontal",
          x: "right",
          y: "top",
          itemWidth: 18, // 设置图例图形的宽
          itemHeight: 30, // 设置图例图形的高
          itemGap: 30,
          backgroundColor: "#eee", // 设置整个图例区域背景颜色
          data: ["大学及以上", "高中及以下", "初中及以下", "小学及以下"],
        },
        series: [
          {
            name: "教育程度",
            type: "pie", // 设置图表类型为饼图
            radius: ["55%", "65%"], // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: [
              // 数据数组，name 为数据项名称，value 为数据项值
              { value: 30, name: "大学及以上" },
              { value: 40, name: "高中及以下" },
              { value: 20, name: "初中及以下" },
              { value: 10, name: "小学及以下" },
            ],
            color: ["green", "blue", "Cyan", "red"], //各个区域颜色
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{b} {d}%",
                }, //饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
                labelLine: {
                  show: true,
                },
              },
            },
          },
        ],
      });
    },

mounted() {
    this.$nextTick(() => {
    	this.initCharts4sEducation();
    });
  },

地图

<div style="height: 400px" ref="chartLocal"></div>

//地域分析
    initCharts5sLocal() {
      let myChart = echarts.init(this.$refs.chartLocal);
      myChart.setOption({
        title: "",
        tooltip: {},
        xAxis: {
          show: false, //隐藏x轴
        },
        yAxis: {
          show: false, //隐藏y轴
        },
        visualMap: { //地图信息
          min: 0,
          //max: 1000,
          left: "left",
          top: "bottom",
          orient: "vertical", //控制条横向
          inRange: {
            color: ["#e0ffff", "#5D78F2"], //取值范围的颜色
          },
          // calculable: true, //是否显示拖把
          show: true, //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
          type: "piecewise", // 定义为分段型 visualMap
          splitNumber: 5, //对于连续型数据，自动平均切分成几段。默认为5段
          pieces: [
            //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
            { min: 5000, label: "5000以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
            { min: 1000, max: 5000, label: "1000-5000" },
            { min: 500, max: 1000, label: "500-1000" },
            { min: 100, max: 500, label: "100-500" },
            { min: 0, max: 100, label: "0-100" },
          ],
        },
        geo: {
          map: "china",
          roam: false, //不开启缩放和平移
          zoom: 1.23, //视角缩放比例
          label: {
            normal: {
              //显示地区名称
              show: false,
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#5D78F2", //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            name: "地域分析",
            type: "map",
            geoIndex: 0,
            data: [
              { name: "北京", value: 4000 }, //name和省份名称一致
              { name: "四川", value: 800 },
              { name: "陕西", value: 5000 },
              { name: "上海", value: 2000 },
            ],
          },
        ],
      });
    },

仪表盘

<div class="chart1" ref="chart1"></div>

initCharts1() {
      let myChart = echarts.init(this.$refs.chart1);
      myChart.setOption({
        title: "",
        tooltip: {},
        xAxis: {
          show: false,
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            name: "交通拥堵指数",
            type: "gauge", //仪表图
            radius: "90%",
            center: ["50%", "50%"], // 仪表盘位置(圆心坐标)
            min: "0",
            max: "10",
            data: [3.78],
            splitNumber: 3, //刻度数量
            pointer: {
              //指针
              show: false,
            },
            axisLine: {
              // 仪表盘轴线(轮廓线)相关配置。
              show: true,
              lineStyle: {
                width: 12, // 这个是修改宽度的属性
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#66bdaa",
                      },
                      {
                        offset: 0.5,
                        color: "#f6a751",
                      },
                      {
                        offset: 1,
                        color: "#e13e3c",
                      },
                    ]),
                  ],
                ],
              },
            },
            splitLine: {
              //分隔线样式
              show: false,
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            axisLabel: {
              //刻度
              show: false,
            },
            itemStyle: {
              // 仪表盘指针样式。
              color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
              opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
              borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
              borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
              shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
              shadowColor: "#fff", // 阴影颜色。支持的格式同color。
            },
            detail: {
              // 仪表盘详情，用于显示数据。
              show: true, // 是否显示详情,默认 true。
              offsetCenter: [0, 0], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              color: "auto", // 文字的颜色,默认 auto。
              fontSize: 30, // 文字的字体大小,默认 15。
            },
          },
        ],
      });
    },

样式修改

去除刻度-放在对应的xAxis/yAxis

axisTick: {
 //y轴刻度线
 show: false
},
axisLine: {
 //轴线
 show: false
},
axisTick: {
 //刻度线
 show: false
},
splitLine: {
 //网格线
 show: false
}