Echarts的用法（前端web项目）

文章目录

• • 简介
  • Vue3项目中使用
  • React项目中使用
  • uniapp项目中使用
  • 总结

简介

ECharts 是一个由百度团队开发的开源可视化库，主要用于生成各种图表和可视化效果。它提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图、雷达图等，并且支持3D图表的展示。

官网：Apache ECharts

使用ehcarts的一般步骤有（以下步骤代码均为ES6）：

1.引入 ECharts 库：可以从 ECharts 的官方网站下载库文件，或者使用 CDN 链接直接在 HTML 文件中引入，也可以使用npm直接安装。

安装：

npm install echarts --save

2.准备一个容器：在 HTML 中定义一个用于承载图表的容器元素，例如一个 <div>。

3.初始化 ECharts 实例：使用 ECharts 的 init 方法初始化一个图表实例，并将其与容器元素关联。

4.配置图表选项：定义一个图表配置对象，设置图表的类型、数据、样式等选项。

5.设置图表数据：使用 setOption 方法将配置对象传递给图表实例，从而渲染图表。

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

Vue3项目中使用

ehcarts在vue项目中可以直接安装引入。

安装：

npm install echarts

pnpm add echarts

yarn add echarts

 Vue3项目中引入示例：

<template>
  <div ref="chartRef" style="width: 500px; height: 500px;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { use } from 'echarts/core';


const chartRef = ref(null);

onMounted(() => {
  const chartDom = chartRef.value;
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: 'ECharts Vue 3 Example'
    },
    tooltip: {},
    legend: {
      data:['销量']
    },
    xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };

  myChart.setOption(option);
});
</script>

React项目中使用

在react中使用echarts推荐使用echarts-for-react插件，这个插件是专门为了适配react中使用echarts的

官网：echarts-for-react - npm (npmjs.com)

安装:

npm install --save echarts-for-react

 导入及配置

import React from 'react';
import ReactECharts from 'echarts-for-react';

const MyChart = () => {
  const option = {
    title : {
      text: '某站点用户访问来源',
      subtext: '纯属虚构',
      x:'center'
    },
    tooltip : {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
      {
      name: '访问来源',
      type: 'pie',
      radius : '55%',
      center: ['50%', '60%'],
      data:[
        {value:335, name:'直接访问'},
        {value:310, name:'邮件营销'},
        {value:234, name:'联盟广告'},
        {value:135, name:'视频广告'},
        {value:1548, name:'搜索引擎'}
      ],
      itemStyle: {
        emphasis: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
      }
    ]
  }

  return <ReactECharts option={option} style={{ height: 400 }} />;
};
export default MyChart

uniapp项目中使用

个人在写一些项目的时候发现在uniapp中如果使用一般的方法引入echarts是无法成功的，主要原因就是uniapp中的view组件不支持直接通过ref绑定来获取dom实例，ref只能绑定到一个组件才能获取到dom实例对象，这就令人很苦恼。在查阅一些资料之后，个人认为最好用的是DCloud插件市场的这个插件： echarts

官网：echarts - DCloud 插件市场

 在DCloud插件市场下载插件之后通过HBuilderX导入到自己的项目

引入配置

这里的l-echart组件非常重要，一般来说导入插件之后会自动注册使用，但如果报错显示未注册，需要开发者自行将插件中的页面文件导入注册组件。

<view style="width:750rpx; height:750rpx"><l-echart ref="chartRef" @finished="init"></l-echart></view>

const echarts = require('../../uni_modules/lime-echart/static/echarts.min');

const chartRef = ref(null)
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow' 
        },
        confine: true
    },
    legend: {
        data: ['热度', '正面', '负面']
    },
    grid: {
        left: 20,
        right: 20,
        bottom: 15,
        top: 40,
        containLabel: true
    },
    xAxis: [
        {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#999999'
                }
            },
            axisLabel: {
                color: '#666666'
            }
        }
    ],
    yAxis: [
        {
            type: 'category',
            axisTick: { show: false },
            data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
            axisLine: {
                lineStyle: {
                    color: '#999999'
                }
            },
            axisLabel: {
                color: '#666666'
            }
        }
    ],
    series: [
        {
            name: '热度',
            type: 'bar',
            label: {
                normal: {
                    show: true,
                    position: 'inside'
                }
            },
            data: [300, 270, 340, 344, 300, 320, 310],
        },
        {
            name: '正面',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true
                }
            },
            data: [120, 102, 141, 174, 190, 250, 220]
        },
        {
            name: '负面',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'left'
                }
            },
            data: [-20, -32, -21, -34, -90, -130, -110]
        }
    ]
};

onMounted( ()=>{
    // 组件能被调用必须是组件的节点已经被渲染到页面上
    setTimeout(async()=>{
        if(!chartRef.value) return
        const myChart = await chartRef.value.init(echarts)
        myChart.setOption(option)
    },300)
})

总结

以上echarts导入方式可在ehcarts官网中详情阅读，其中uniapp导入方式相对好用，但由于小程序限制包大小，所以导入之后需要进一步做分包优化处理，如果有需要可以去网上搜一搜分包优化配置相关。