echarts 大数据可视化

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

特点:

兼容绝大多数浏览器

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

 1. title 配置

#div {
  width: 100%;
  height: 100%;
}

#main {
  width: 500px;
  height: 500px;
}

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

#div {
  width: 100%;
  height: 100%;
}

#main {
  width: 500px;
  height: 500px;
}

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,
          ],
        },
      ],