echarts 大数据可视化

echarts是一个开源的js图表库  就是为了完成大数据可视化,也是现在企业中比较主流得图表库

特点:

兼容绝大多数浏览器

高度定制化我们数据可视化图表

 1. title 配置

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

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    //setOption 是一个方法 就是用来设置当前echarts的各种配置的一个方法
    myChart.setOption({
      title: {
        //设置标题的
        text: "我是主标题", //类似于一个主标题
        //show:false        //是否显示标题
        link: "http://www.baidu.com", //设置点击标题之后的超链接地址
        target: "self", //设置当跳转之后是否打开新页面
        subtext: "我是副标题", //设置副标题
        sublink: "http://www.qq.com",
        backgroundColor: "gra y",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>

<style scoped>
#div {
  width: 100%;
  height: 100%;
}

#main {
  width: 500px;
  height: 500px;
}
</style>

2. tooltip 设置提示框组件的一个属性

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

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    //setOption 是一个方法 就是用来设置当前echarts的各种配置的一个方法
    myChart.setOption({
      title: {
        //设置标题的
        text: "我是主标题", //类似于一个主标题
        //show:false        //是否显示标题
        link: "http://www.baidu.com", //设置点击标题之后的超链接地址
        target: "self", //设置当跳转之后是否打开新页面
        subtext: "我是副标题", //设置副标题
        sublink: "http://www.qq.com",
        backgroundColor: "gra y",
      },
      //提示框设置
      tooltip: {
        show: true, //显示或隐藏    默认显示
        trigger: "axis", //触发类型 默认必须在图形中才能触发  设置axis之后可以按照坐标轴触发
        axisPointer: {
          //触发类型之后的显示选项
          type: "shadow", //cross显示一个十字准心的样式   shadow 图形被阴影包裹
        },
        triggerOn: "click", //默认mousemove     click 点击之后触发
        backgroundColor: "yellow",
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>

<style scoped>
#div {
  width: 100%;
  height: 100%;
}

#main {
  width: 500px;
  height: 500px;
}
</style>

3. series  系列 在series 中 系列的意思是指一组数值生成他们所映射的图

series: [
        {
          name: "销量",
          type: "line", //bar 默认柱状图   line 折线图
          data: [5, 20, 36, 10, 10, 20],
        },
      ],

4.legend 图例  对当前的系列进行标记 ，它可以通过点击控制显示的内容

 legend: {
        icon: "circle", // circle  将图例设置成圆形
      },

5. 设置单个柱状图的颜色  itemStyle 在数据中对单个柱子进行颜色设置

 series: [
        {
          name: "销量",
          type: "bar", //bar 默认柱状图   line 折线图
          data: [
            5,
            {
              value: 20,
              itemStyle: {
                color: "#a90000",
              },
            },
            36,
            10,
            10,
            20,
          ],
        },
      ],