在 Vue 中使用 ECharts(数据可视化)

使用步骤

1. 在命令行中输入 npm install echarts --save --save 是代表安装运行依赖的。 或者在 图形化界面的 运行依赖 中安装 echarts
2. 在官网中 --> 文档 --> 在 webpack 中使用 ECharts. 中按需引入 ECharts 图标和组件(但是也可以全部引入，只不过包有点大而已)
3. 创建 mounted()方法引入，包要放在最外层，把 require('echarts/lib/chart/bar'); 的 require 换成 import
4. 初始化 echarts 实例 document.getElementById(“main”) 可以换成自己想要的 id ,必须要给 id 设置宽高。
5. 反复切换引入:绘制图表 myChart.setOption({ 在此引入官网的代码})

<template>
  <div>
    <div id="Pie"></div>
  </div>
</template>

<script>
// 1. 先在运行依赖安装 echarts
// 2. 按需引入 echarts 图标和组件
// 3. 是写在 mounted 方法里面的
// 4. 写上 main id 的小盒子
// 5. 还要写上 main 的宽度才能看到显示

// 引入 ECharts 主模块
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/pie";
// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
import "echarts/lib/component/title";
export default {
  name: "PieDemo",
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("Pie"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "第嘉学社工资表",
        subtext: "数据仅供参考",
        left: "center",
      },
      // tooltip //触发提示
      tooltip: {
        // trigger: "item", //触发
        // formatter: '{a}<br/>{b}: {c} ({d}%)' //格式化
        // formatter:  '{b0}: {c0}<br />{b1}: {c1}' //格式化
      },
      legend: {
        orient: "vertical", //方向垂直
        right: 0, //左距离
        top: 150, // 顶距离
        // 小标签提示的信息，但要和以下的内容相匹配
        data: ["4K-6K", "6K-8K", "8K-10K", "10K-15K", "15K-20K", "20K-30K"],
      },
      series: [
        {
          center: ['40%', '50%'], //扇形在盒子中的位置
          name: "薪资待遇", //触发标签显示的信息
          type: "pie", // 饼图的简称
          radius: ["20%", "60%"], //[内径圆的大小,外径圆的大小]
          avoidLabelOverlap: true, // 线的长短
          label: {
            show: true, //圆周围的显示标签
            // position: "center", // 所有标签的定位在内径居中
          },
          emphasis: {
            label: {
              // show: true,  //内径的文字不显示
              // fontSize: "30",  //内径的文字字号
              // fontWeight: "bold", //内径字体加粗
            },
          },
          labelLine: {
            // show: false,
            // show: true,
          },
          data: [
            { value: 100, name: "4K-6K" },
            { value: 150, name: "6K-8K" },
            { value: 200, name: "8K-10K" },
            { value: 250, name: "10K-15K" },
            { value: 300, name: "15K-20K" },
            { value: 350, name: "20K-30K" },
          ],
        },
      ],
    });
  },
};
</script>

<style>
#Pie {
  width: 600px;
  height: 500px;
  /* border: 1px solid #000; */
}
</style>

1019 最新补充

第一种 数组列表法

itemStyle: {
      normal: {
       // 随机显示
       //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
       // 定制显示（按顺序）
         color: function(params) { 
            var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3' ]; 
             return colorList[params.dataIndex] 
             }
           },
       },

第二种方法 判断法

itemStyle:{
    normal:{
       color:function(params){
              if(params.value >0 && params.value <100){
                  return "#FE8463";
               }else if(params.value >=100 && params.value<=300 ){
                   return "#27727B";
                }
               return "#9BCA63";
          }
  }

第三种方法定义 data 法

var data1 = [ 700, 500, 450, { value: 1000, itemStyle: { color: "pink" } }, 300, 200, 100, 350,];
data: data1,

<template>
  <div id="bar"></div>
</template>

<script>
// 1. 把底下的 X  坐标轴给去掉  在文档查找对应的轴加上想要的属性 show:false
// 2. 数据显示在右边  已解决 5大元素定位
// 3. 修改颜色

// 引入 ECharts 主模块
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/bar";
// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/title";
var data1 = [
  700,
  500,
  450,
  { value: 1000, itemStyle: { color: "pink" } },
  300,
  200,
  100,
  350,
];
export default {
  name: "BarDemo",
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("bar"));
    console.log(data1.length);
    // 绘制图表
    myChart.setOption({
      tooltip: {},
      // 编辑图形的大小
      grid: {
        left: "3%",
        right: "20%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "",
        show: false,
      },
      yAxis: {
        type: "category",
        data: ["杭州", "长春", "成都", "武汉", "广州", "深圳", "北京", "上海"],
        inverse: true, //是否反向坐标轴
        // max:1 min:7 坐标轴刻度最大最小值。
        // show: false,
      },
      series: [
        {
          // name: "邮件营销",
          type: "bar",
          // stack: "总量",

          label: {
            show: true,
            formatter: "{c} 职位", //深圳{b} 160 职位
            position: "insideLeft", //定位
            distance: 400, // 距离
            verticalAlign: "middle", // middle 中间
            rotate: 0, //旋转角度
            align: "left", //排列 left center right
            color: "#777",
            fontSize: 12,
            fontWeight: "bold",
          },
          // 这里的 data 就是柱状图的数量
          data: data1,
          barWidth: "80%", // 柱状大小
          // 柱状图的样式 在serise中增加itemStyle, 定义一个颜色数组colorList ,返回的颜色根据data.dataIndex获取下标取得相应颜色
          itemStyle: {
            // 鼠标悬停时柱状图的模糊
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            // color:'#888',
            // 柱状图颜色单一改法
            // normal: {
            //   color(params) {
            //     const colorList = [
            //       "#C1232B",
            //       "#B5C334",
            //       "#FCCE10",
            //       "#E87C25",
            //       "#27727B",
            //       "#FE8463",
            //       "#9BCA63",
            //       "#FAD860",
            //       "#F3A43B",
            //       "#60C0DD",
            //       "#D7504B",
            //       "#C6E579",
            //       "#F4E001",
            //       "#F0805A",
            //       "#26C0C0",
            //     ];
            //     return colorList[params.dataIndex];
            //   },
            // },
            // 第二种改法 判断法
            // normal: {
            //   color: function (params) {
            //     if (params.value > 0 && params.value < 300) {
            //       return "pink";
            //     } else if (params.value >= 100 && params.value <= 400) {
            //       return "#9BCA63";
            //     }
            //     return "teal";
            //   },
            // },
            // 第三种方法看上面定义的 data1
          },
        },
      ],
    });
  },
};
</script>

<style>
#bar {
  width: 500px;
  height: 400px;
  /* border: 1px solid #000; */
  font-weight: bold;
}
</style>

两张效果图

详细的知识请参看配置型文档或者去实例参考