Echarts一个不依赖canvas绘制图表的插件

前言：

• 图表可以很直观的把庞大的数据以一种合适的方式展现给我们，我们也能通过进行图表分析得出有价值的信息，前端人员就是为了把数据以一种很舒服、很直观的方式给别人展现出来，这其实就少不了ECharts，所以说，echarts到底是什么呢？如何使用？ 本篇文章就来给大家介绍一下echarts的内容。

---

1.什么是Echarts

• 从官网的解释我们可以知道echarts是商业级数据图表，是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
  简而言之，echarts就是一个帮助数据可视化的库。

---

2.Echarts官方网站:

https://echarts.apache.org/examples/zh/index.html#chart-type-line

3.怎么使用Echarts

• 1.首先要安装Echarts插件 下载自己需要的版本即可

npm install [email protected] --save   
注：不建议安装最新版本最新版本多少会有bug

• 2.在main.js中引入Echarts

import echarts from 'echarts'
// 挂载到vue原型中就可以全局使用
Vue.prototype.$echarts = echarts

• 3.创建一个显示标签div

• 4.初始化echatrs实例，并挂载到dom容器中

let myChart = this.$echarts.init(document.getElementById("main"));

• 5.配置图表数据

let option = {
      // 标题
      title: {
        text: "会话量",
      },
      tooltip: {
        // 鼠标移入
        trigger: "axis",
      },
      legend: {
        data: ["销量"],
      },
      // X轴上数据
      xAxis: {
        // 类目轴
        type: "category",
        data: [
          "帽子",
          "上衣",
          "衬衫",
          "羊毛衫",
          "雪纺衫",
          "裤子",
          "高跟鞋",
          "袜子",
        ],
      },
      // Y轴上数据
      yAxis: {
        type: "value",
      },

      // 显示数据
      series: [
        {
          name: "销量",
          // 类型
          type: "bar",
          // 是否显示柱条的背景色
          showBackground: true,
          // 背景样式
          backgroundStyle: {
            // 柱条的颜色
            color: "rgba(0, 201, 252, 0.2)",
            // 边框颜色
            borderColor: "blue",
            // 边框
            borderWidth: 1,
          },

          label: {
            show: true,
          },
          // 当前样式
          itemStyle: {
            // 颜色
            color: "red",
          },
          data: [
            // 多种背景色
            6,
            8,
            {
              value: 5,
              itemStyle: {
                color: "red",
              },
            },
            {
              value: 20,
              itemStyle: {
                color: "blue",
              },
            },
            {
              value: 36,
              itemStyle: {
                color: "yellowgreen",
              },
            },
            {
              value: 10,
              itemStyle: {
                color: "purple",
              },
            },
            {
              value: 10,
              itemStyle: {
                color: "green",
              },
            },
            {
              value: 20,
              itemStyle: {
                color: "gray",
              },
            },
          ],
        },
      ],
    };
 // 以上数据echarts官网可查

• 6.将配置和数据添加到实例中

myChart.setOption(option);

• 7.做完以上这些就可以实现图表的绘画

---

4、总结

以上就是在vue中如何正确的使用echarts插件来完成图表的绘画以及安装echarts时注意事项、希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一 一解答。谢谢观看！
我的其他文章