如何使用echarts

最新推荐文章于 2022-06-28 14:39:12 发布

愚者的旋律

最新推荐文章于 2022-06-28 14:39:12 发布

阅读量395

点赞数

分类专栏： Echarts

本文链接：https://blog.csdn.net/qq_32202099/article/details/103272346

版权

Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在项目中使用echarts

在项目中使用echarts的方法有很多,主要有:

下载 echarts.min.js 并用 script 标签引入

  //如果是开发环境可以使用源码版本 echarts.js,源码版本包含了常见的错误提示和警告
  <script src="echarts4.5\echarts.min.js"></script>

使用 CDN 方法

  //使用百度cdn,部署环境不推荐使用cdn的方式,因为需要联网而且不稳定
  <script src="https://echarts.baidu.com/dist/echarts.min.js"></script>

使用cnpm安装

  //需要准备好ndoe,npm环境,使用时直接在项目代码中使用 require('echarts') 来使用,需要ES6支持
  $ cnpm install echarts --save

hello_echarts

本文以上述第一种方式为例介绍echarts如何使用

直接贴代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 初始化echarts图表的初始div大小,必须设置,否者会出现空白页面 -->
    <style>
        #echart {
            width: 400px;
            height: 400px;
            background-color: chartreuse;
        }
    </style>
    <!-- 引入echarts -->
    <script src="echarts4.5\echarts.min.js"></script>
</head>

<body>
     <div id="echart">

    </div>
</body>
<script>
    //echarts图表div的dom节点
    let dom = document.getElementById("echart");
    //初始化dom节点
    let myChart = echarts.init(dom);
    //官网实例
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                    value: 335,
                    name: '直接访问'
                },
                {
                    value: 310,
                    name: '邮件营销'
                },
                {
                    value: 234,
                    name: '联盟广告'
                },
                {
                    value: 135,
                    name: '视频广告'
                },
                {
                    value: 1548,
                    name: '搜索引擎'
                }
            ]
        }]
    };
    //渲染图表
    myChart.setOption(option, true);
</script>

</html>

愚者的旋律

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用echarts

在项目中使用echarts在项目中使用echarts的方法有很多,主要有:下载 echarts.min.js 并用 script 标签引入 //如果是开发环境可以使用源码版本 echarts.js,源码版本包含了常见的错误提示和警告 <script src="echarts4.5\echarts.min.js"></script>使用 CDN 方法...
复制链接

扫一扫