vue---使用echarts绘制图形_vue绘制图形

echarts

提供了数据可视化图表（包括：折线图、柱形图、散点图、饼图、地图、热力图等等）

1、安装【npm install echarts --save】

2、引入

      ①全局引入：在【main.js】中引入将echarts直接绑定在vue实例上，所以在项目中任何页面，直接 this.$echarts方式调用即可。

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
//直接绑定在vue实例上，所以在项目中任何页面，直接 this.$echarts 即可

    ②局部引入：在使用页面引入

import echarts from 'echarts'

3、使用echarts绘制图形

       ①基于准备好的dom初始化echarts实例，通过 【echarts.init】 方法初始化一个 echarts 实例。

           【var myChart = echarts.init(document.getElementById(id), "light");】

     注意：容器dom一定要写出wigth,height样式，让容器具备大小

       ②通过 【setOption】方法绘制图形

           【 myChart.setOption(option);】【let option={....}】

4、option中常用组件/属性介绍

     （1）颜色主题：ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 'light' 和 'dark'

  使用方式：【var chart = echarts.init(dom, 'light')】

  （2）修改背景颜色：【backgroundColor: "#2c343c"】

  （3）设置文本样式：【textStyle: { color: "rgba(255, 255, 255, 0.3)" }】

  （4）配置阴影：

//阴影的配置
        itemStyle: {
          // 阴影的大小
          shadowBlur: 50,
          // 阴影水平方向上的偏移
          shadowOffsetX: 0,
          // 阴影垂直方向上的偏移
          shadowOffsetY: 0,
          // 阴影颜色
          shadowColor: "rgba(0, 0, 0, 0.6)",
          // 通过 emphasis 属性来定制高亮
          emphasis: {
            shadowBlur: 200,
            shadowColor: "rgba(0, 0, 0, 0.9)"
          }
        },

  （5）设置标签引导线

 labelLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.3)"
          }
        }

（6）常用组件

5、实例：

<template>
  <div class="chart">
    <h1>ECharts学习</h1>
    <!-- 为echars准备一个容器dom，一定要给出大小 -->
    <div class="chart-wrapper">
      <div id="hisChart"></div>
      <div id="pieChart"></div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    this.drawHisChart("hisChart");
    this.drawPieChart("pieChart");
  },
  methods: {
    // 绘制柱形图
    drawHisChart(id) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(id), "light");
      // 准备配置
      let option = {
        title: {
          text: "人流量统计"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          name: "时间"
        },
        yAxis: {
          type: "value",
          name: "人流量"
        },
        grid: {
          top: 70,
          left: "5%"
        },
        series: [
          {
            name: "AAA大厦",
            type: "bar",
            data: [51, 20, 36, 10, 10, 20, 3],
            barWidth: 15
          },
          {
            name: "BBB大厦",
            type: "bar",
            data: [20, 36, 10, 10, 20, 31, 12],
            barWidth: 15
          }
        ],
        dataZoom: [
          // slider只能拖动 dataZoom 组件导致窗口变化
          {
            // 这个dataZoom组件，默认控制x轴。
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            xAxisIndex: 0,
            start: 10, // 左边在 10% 的位置。
            end: 60 // 右边在 60% 的位置。
          },
          //  inside 实现用滚轮（或移动触屏上的两指滑动）进行缩放，
          {
            // 这个dataZoom组件，也控制x轴。
            type: "inside", // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            xAxisIndex: 0,
            start: 10, // 左边在 10% 的位置。
            end: 60 // 右边在 60% 的位置。
          },
          // slider只能拖动 dataZoom 组件导致窗口变化
          {
            // 这个dataZoom组件，默认控制x轴。
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            yAxisIndex: 0,
            start: 30,
            end: 80
          },
          //  inside 实现用滚轮（或移动触屏上的两指滑动）进行缩放，
          {
            // 这个dataZoom组件，也控制x轴。
            type: "inside", // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            yAxisIndex: 0,
            start: 30,
            end: 80
          }
        ]
      };
      // 使用这个配置，绘制图表
      myChart.setOption(option);
    },
    drawPieChart(id) {
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById(id));
      let option = {
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            data: [
              {
                value: 235,
                name: "视频广告"
                // itemStyle: {
                //   color: "#c23531"
                // }
              },
              { value: 274, name: "联盟广告" },
              { value: 310, name: "邮件营销" },
              { value: 335, name: "直接访问" },
              { value: 400, name: "搜索引擎" }
            ]
          }
        ],
        //阴影的配置
        itemStyle: {
          // 阴影的大小
          shadowBlur: 50,
          // 阴影水平方向上的偏移
          shadowOffsetX: 0,
          // 阴影垂直方向上的偏移
          shadowOffsetY: 0,
          // 阴影颜色
          shadowColor: "rgba(0, 0, 0, 0.6)",
          // 通过 emphasis 属性来定制高亮
          emphasis: {
            shadowBlur: 200,
            shadowColor: "rgba(0, 0, 0, 0.9)"
          }
        },
        //修改背景颜色
        backgroundColor: "#2c343c",
        // 设置文本样式
        textStyle: {
          // color: "rgba(255, 255, 255, 0.3)"
        },
        // 设置标签引导线
        labelLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.3)"
          }
        },
        itemStyle: {
          // 设置扇形的颜色
          color: "#c23531",
          shadowBlur: 200,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        },
 
        visualMap: {
          // 不显示 visualMap 组件，只用于明暗度的映射
          show: false,
          // 映射的最小值为 80
          min: 80,
          // 映射的最大值为 600
          max: 600,
          inRange: {
            // 明暗度的范围是 0 到 1
            colorLightness: [0, 1]
          }
        }
        // 设置 roseType 显示饼图将成南丁格尔图
        // roseType: "angle"
      };
      myChart1.setOption(option);
      // click事件
      myChart1.on("click", function(params) {
        console.log("1==", params.name);
        window.open(
          "https://www.baidu.com/s?wd=" + encodeURIComponent(params.name)
        );
      });
    }
  }
};
</script>
<style lang="less">
.chart-wrapper {
  display: flex;
  #hisChart,
  #pieChart {
    width: 800px;
    height: 600px;
    background: rgb(228, 223, 218);
    margin-right: 20px;
  }
}
</style>

    参考：  echarts--option