使用Echarts的一些实例(含部分注释)

最新推荐文章于 2024-06-20 09:30:03 发布
最新推荐文章于 2024-06-20 09:30:03 发布
阅读量690 收藏 1
点赞数 1
分类专栏： Echarts 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SL_World/article/details/88343609
版权

前言

完整代码见我的GitHub，内含CSS和echarts.js,下载可直接使用。

效果预览

1.单个饼图

在这里插入图片描述
【代码示例】：

<body>
    <!--2.为ECharts准备一个具备大小(宽高)的DOM-->
    <div id="pie" class="fream"></div>
    <script type="text/javascript">
        // 3.基于准备好的dom，初始化echarts实例
        var mychart = echarts.init(document.getElementById('pie'));
        // 4.指定图表的option和data
        var option = {
            title : {
                text: '2018年所属机构论文投递数',
                subtext: 'AAAI论文投递数排名top10所属机构国家分布图',
                x:'center',
                textStyle:{
                    fontSize:25, // 标题字体大小
                },
                subtextStyle:{
                    fontSize:18, // 副标题字体大小
                },
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical', // 垂直显示
                left: '20%',         // 靠左显示
                data: ['中国','美国','英国','澳大利亚','新加坡',
                       '日本','中国香港','印度','加拿大','德国',
                       '韩国','以色列','意大利'],
                selected: {'以色列':0,'意大利':0}, // 为0表示状态为未选中
            },
            series : [
                {
                    name: '论文统计',
                    type: 'pie',
                    radius : '60%', // 圆半径
                    center: ['50%', '60%'],
                    data:[
                        {value:1242, name:'中国'},
                        {value:934, name:'美国'},
                        {value:128, name:'英国'},
                        {value:124, name:'澳大利亚'},
                        {value:109, name:'新加坡'},
                        {value:99, name:'日本'},
                        {value:92, name:'中国香港'},
                        {value:96, name:'印度'},
                        {value:68, name:'加拿大'},
                        {value:68, name:'德国'},
                        {value:60, name:'韩国'},
                        {value:43, name:'以色列'},
                        {value:34, name:'意大利'},
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychart.setOption(option);
    </script>
</body>

2.并列饼图

在这里插入图片描述

3.横向柱状图(加阴影和右上角工具箱)

在这里插入图片描述

4.纵向柱状图(加阴影和右上角工具箱)

在这里插入图片描述

SL_World
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
echarts 实例
qq_43343499的博客
10-29 1934
echarts 实例 官方文档地址:/echarts.apache.org 一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。 系列（series） 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”
echarts案列
Wpl6666的博客
03-28 424
1.首先导入echarts文件 <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script> 2. bar 柱状图: 样式: 柱状图代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &l.
echarts完整实例
10-20
这是我实际项目中的一个echarts完整实例，将echarts数值通过json方式从后台数据库中读取。
echart 实例
11-16
各个图标的实例
Echarts各类图表常用配置项说明，附示例代码
最新发布
共同学习，共同成长
06-20 1627
​大家好，我是前端菜鸟的自我修养！今天给大家分享【Echarts各类图表常用配置项说明 】，并提供具体代码帮助大家深入理解，彻底掌握！
echarts的实训例题（散点图和涟漪，仪表盘（数据更新和制定按钮））的绘制
weixin_68473774的博客
03-26 572
【代码】echarts的实训例题（散点图和涟漪，仪表盘（数据更新和制定按钮））的绘制。
jquery使用echarts实现有向图可视化功能示例
10-15
`drawGraph`函数初始化ECharts实例并设置图表的配置选项。其中，`type: 'graph'`表示我们要创建的是网络图，`layout: 'force'`表示使用力导向布局，这种布局会根据节点间的关系自动调整它们的位置。`symbolSize`定义...
Jquery Echarts图表插件，自己研究总结实例+注释说明（源码）
09-11
使用jQuery选择器获取div元素，然后调用`echarts.init()`方法初始化ECharts实例，例如： ```javascript var myChart = echarts.init(document.getElementById('main')); ``` 4. 配置图表： 创建一个JavaScript...
echarts动态加载多组曲线实例.zip
07-11
3. 初始化ECharts实例，`var myChart = echarts.init(document.getElementById('main'));`。 4. 定义初始配置，包括图表类型（line表示折线图）、X轴和Y轴的类型、以及可能存在的图例等。 5. 使用`myChart.setOption...
echarts整合多个类似option的方法实例
01-19
最近项目里面遇到一些图表需要用echarts来做。而我之前只用过一次echarts,也只是做了一个简单的饼状图，并没有涉及到很多的配置。但是现在这个项目，这些图表需要自己配置很多东西。像什么多余的网格线不显示啊，每...
echarts-example
01-26
初始化ECharts实例时，需要指定div的ID，并配置图表的基本属性和数据。例如： ```html <div id="main"></div> var myChart = echarts.init(document.getElementById('main')); var option = { title: {text: ...
echarts的几个例子
07-21
echarts使用的包含柱状图等几个例子，其中zoomData图表中添加了计算选择的区间的方法，可以进行及时查询。
echarts案列代码
08-21
echarts
Echarts实例
11-29
简单的Echars使用小demo,解压后，直接点html便可以看到效果
echarts实例
08-29
输入数据会形成表格装数据,同时数据会形成对应的统计图,还可以选择统计图的类型.
Echarts基本示例
weixin_47353884的博客
03-14 924
import React, { useEffect, useRef } from 'react' import * as echarts from 'echarts'; function MyEcharts({ option }) { const ech = useRef() useEffect(() => { var myChart = echarts.init(ech.current); // 绘制图表 myChart.setOption(option); }
echarts入门小案例
爱琴孩的博客
10-17 1782
前言这里不介绍echarts的原理，也不罗列echarts的具体支持哪些图表，这些官网上都有的。这里只是简单的两个小例子。仅供学习之用。 在使用echarts之前需要做的是，引入jquery和echarts包，至于jquery包就不多说了，echarts包官网上也是有的，建议在开发环境下载源码包，这样方便开发调试。 至于怎么js包相比不需多讲，接下来看页面中body中的代码！<body> <!-
echarts各种案例，实例
热门推荐
意外金喜
12-19 2万+
WEB前端开发大数据可视化项目会用到很多数据图表，其中echarts是一个很不错的选择，他是由百度团队研发，但是其配置非常多，这里分享一个网站，里面有很多优秀的例子。 echarts各种酷炫例子（含代码）：传送门 ...
echarts的常用案例
wyk760629476的专栏
07-05 1155
安装依赖后引入echarts // mian.js import echarts from 'echarts'//引入 Vue.prototype.$echarts = echarts// 挂在vue上面 直接引入js <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> 在文件中创建图表指定宽高 .
微信小程序开发如何使用ECharts柱状图，请给出详细的使用步骤，并写一个demo给详细的注释
06-03
好的，以下是使用ECharts柱状图的详细步骤： 1. 首先，在微信小程序项目中引入ECharts库。可以通过npm进行安装，也可以手动下载并放置在项目目录中。同时，需要在wxml文件中引入ECharts的canvas组件： ```html <!-- index.wxml --> <view class="container"> <ec-canvas id="mychart"></ec-canvas> </view> ``` 2. 在js文件中引入ECharts并获取canvas对象： ```javascript // index.js import * as echarts from '../../ec-canvas/echarts'; Page({ onReady: function () { // 获取组件 this.ecComponent = this.selectComponent('#mychart'); // 初始化图表 this.initChart(); }, // 初始化图表 initChart: function () { this.ecComponent.init((canvas, width, height) => { // 初始化echarts const chart = echarts.init(canvas, null, { width: width, height: height }); // 设置图表配置项 const option = { // ... }; // 使用刚指定的配置项和数据显示图表 chart.setOption(option); // 将图表实例绑定到this上，方便其他方法调用 this.chart = chart; return chart; }); } }) ``` 3. 在option中设置柱状图的相关属性： ```javascript // ... const option = { // 柱状图的标题 title: { text: '柱状图示例' }, // 柱状图的x轴 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 柱状图的y轴 yAxis: { type: 'value' }, // 柱状图的数据 series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }; // ... ``` 4. 最后，通过调用chart.setOption方法将图表渲染到canvas中： ```javascript // ... // 使用刚指定的配置项和数据显示图表 chart.setOption(option); // ... ``` 这样，我们就成功地在微信小程序中使用了ECharts柱状图。 以下是一个完整的demo，其中包含了详细的注释： ```html <!-- index.wxml --> <view class="container"> <ec-canvas id="mychart"></ec-canvas> </view> ``` ```javascript // index.js // 引入ECharts库 import * as echarts from '../../ec-canvas/echarts'; Page({ onReady: function () { // 获取组件 this.ecComponent = this.selectComponent('#mychart'); // 初始化图表 this.initChart(); }, // 初始化图表 initChart: function () { this.ecComponent.init((canvas, width, height) => { // 初始化echarts const chart = echarts.init(canvas, null, { width: width, height: height }); // 设置图表配置项 const option = { // 柱状图的标题 title: { text: '柱状图示例' }, // 柱状图的x轴 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 柱状图的y轴 yAxis: { type: 'value' }, // 柱状图的数据 series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }; // 使用刚指定的配置项和数据显示图表 chart.setOption(option); // 将图表实例绑定到this上，方便其他方法调用 this.chart = chart; return chart; }); } }) ``` 希望能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SL_World

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值