Echart.js的简单使用

安装

npm install echarts

引入

在main.js中全局引入echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts 

按需引入组件

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入扇形图组件
require('echarts/lib/chart/pie')
// 引入提示框、title组件、图例组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
// 使用 require 而不是 import，是因为 require 可以直接从 node_modules 中查找， import 必须把路径写全。

柱状图和普通扇形图

先奉上效果图：

<template>
  	<div>
    	<div id="myChart" style="width: 600px; height: 400px; float: left"></div>
    	<div id="main" style="width: 600px; height: 400px; float: left"></div>
  	</div>
</template>

<script>
import echarts from "echarts";  //全局引入echarts插件
export default {
  	name: "other",
  	data() {
    	return {
      		Baroption: {
        		title: { text: "bar echarts" }, 
        		tooltip: {},
        		legend: { data: ["销量"]},
        		xAxis: {  //直角坐标系 X 轴
          			data: ["客房营收", "餐饮支出", "水电支出", "其他"],
        		},
        		yAxis: {}, //直角坐标系 y 轴
        		series: [
          			{	type: "bar",
            name: "销量",
            data: [7200, 780, 120, 2100],
          },
        ],
      },
      mainOption: {
        title: {  // 标题
          text: "扇形图", //大标题
          subtext: "纯属虚构", //副标题
          x: "center", //标题位置    cente：居中
        },
        tooltip: { //提示框组件
          trigger: "item", //数据项图形触发，主要在散点图，饼状图等无类目轴的图
          formatter: "{a} <br/>{b} : {c} ({d}%) ", // 高亮时标签的文字
          /* 这个formatter是当鼠标放置在某一个块中显示出来的文字
            例如：访问来源
                  邮件营销：234(9%)   */
        },
        legend: {  //图例组件
          orient: "vertical", //图例组件的布局朝向
          left: "left", //文字颜色放置方向
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"], //图标中包含的文字信息
        },
        series: [  //系列列表。每个系列通过 type 决定自己的图表类型
          {
            name: "访问来源",
            type: "pie",
             // color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5'], 这个是自定义的颜色
            radius: "60%", //这个是扇形图的半径，扇形图在div中占的大小
            center: ["50%", "60%"], //这个是扇形图的圆心。第一个参数50%是指在竖直方向的，第二个参数60%是在水平方向
            //["10%", "10%"]是在左上角，["90%", "10%"]是在右上角，["10%", "90%"]是在左下角，["90%", "90%"]是在右下角
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1587, name: "搜索引擎" },
            ],
            itemStyle: {
              emphasis: { // 高亮时标签的样式
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0,0,0,0.5)",
              },
            },
          },
        ],
      }
    };
  },
  methods: {
    drawPid() {
      let myChart = echarts.init(document.getElementById("myChart"));
      myChart.setOption(this.Baroption);
    },
    mainChart() {
      let main = echarts.init(document.getElementById("main"));
      main.setOption(this.mainOption);
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.drawPid("myChart");
      this.mainChart("main");
    });
  },
};
</script>

玫瑰柱状图和雷达图

还是先奉上效果图：

<div id="main" style="width: 600px; height: 400px"></div>
<div id="radar" style="width: 800px; height: 600px"></div>

data() {
    return {
    	mainOption: {
        backgroundColor: "#2c343c",
        title: {
          text: "Customized Pie",
          left: "center", //标题的位置
          top: 20, //相当于margin-top:20px
          textStyle: {
            color: "#ccc", //标题的颜色
          },
        },
        tooltip: {  //提示框组件
          trigger: "item", //数据项图形触发，主要在散点图，饼状图等无类目轴的图
        },
        visualMap: {
          show: false, //为true时，会在左下显示一个颜色柱，到一定位置，相应模块会高亮
          min: 100,
          max: 600,
          inRange: { colorLightness: [0, 1], },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "70%", //这个是扇形图的半径，扇形图在div中占的大小
            center: ["50%", "60%"], 
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 400, name: "搜索引擎" },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            // label: { color: "rgba(255,255,255,0.3" },//这个是搜索引擎等字体颜色
            label: { color: "rgba(255,255,255,0.3)" },
            labelLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.3)",
              },
              smooth: 0.2,
              length: 10, //这个是斜的那一杠
              length2: 30, //这个是偏横向，但是斜向也会变化
            },
            itemStyle: {
              color: "#749f83", //这个是图的颜色
              shadowBlur: 200, //好像是阴影
              shadowColor: "rgba(0,0,0,0.5)",
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      },radarOption: {
        title: {
          text: "基础雷达图",
        },
        tooltip: {},
        legend: {
          data: ["实际开销"],
        },
        radar: {
          name: {
            textStyle: {
              color: "#eee",
              backgroundColor: "#999",
              borderRadius: 9,
              padding: [3, 5],
            },
          },
          indicator: [
            { name: "销售", max: 6500 },
            { name: "管理", max: 16000 },
            { name: "客服", max: 38000 },
            { name: "研发", max: 52000 },
            { name: "市场", max: 25000 },
            { name: "信息技术", max: 30000 },
          ],
        },
        series: [
          {
            name: " 开销",
            type: "radar",
            data: [
              {
                value: [1000, 14000, 25000, 31000, 21000, 21000],
                name: "实际开销",
              },
            ],
          },
        ],
      },
    };
  },
 methods: { 
 	mainChart() {
      let main = echarts.init(document.getElementById("main"));
      main.setOption(this.mainOption);
    }, 
    radarChart() {
      let radar = echarts.init(document.getElementById("radar"));
      radar.setOption(this.radarOption);
    },
  },
  mounted() {
    this.$nextTick(function () {
    	 this.mainChart("main");
    	 this.radarChart("radar");
    });
  },
};

官方示例图

旧版本
新版本