echarts图表制作

最新推荐文章于 2023-07-12 21:34:23 发布
最新推荐文章于 2023-07-12 21:34:23 发布
阅读量365 收藏 1
点赞数 1
分类专栏： 随笔 文章标签： echarts 地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/datuoxiea/article/details/53066049
版权
一般的图表（除地图）可看文档，按照文档制作即可： http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

地图：
地图的制作需要先引入相应地图的js文件，或json文件，地图下载地址： http://echarts.baidu.com/download-map.html
引入方式为（js引入）：
<script src = "echarts.js" ></script>
<script src = "map/js/china.js" ></script>
<script>
var chart = echarts . init ( document . getElementById ( 'main' ));
chart . setOption ({  
series : [{ type : 'map' ,  
map : 'china'  
}]
});
</script>
引入都按一般的图表制作即可。
下面以下图实现效果作为例子：


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <script  src="js/echarts.js"></script>
    <script src="js/china.js"></script>

<title></title>
</head>
<body>
<div id="main" style="width: 1200px;height:800px;"></div>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
   series: [{
       type: 'map',
       map: 'china'
   }]
});
        // 指定图表的配置项和数据
    function randomData() {
    return Math.round(Math.random()*1000);
}


option = {
    title: {
        text: 'iphone销量',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['iphone3','iphone4','iphone5']
    },
    visualMap: {
        min: 0,
        max: 2500,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {
            name: 'iphone3',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '北京',value: randomData() },
                {name: '天津',value: randomData() },
                {name: '上海',value: randomData() },
                {name: '重庆',value: randomData() },
                {name: '河北',value: randomData() },
                {name: '河南',value: randomData() },
                {name: '云南',value: randomData() },
                {name: '辽宁',value: randomData() },
                {name: '黑龙江',value: randomData() },
                {name: '湖南',value: randomData() },
                {name: '安徽',value: randomData() },
                {name: '山东',value: randomData() },
                {name: '新疆',value: randomData() },
                {name: '江苏',value: randomData() },
                {name: '浙江',value: randomData() },
                {name: '江西',value: randomData() },
                {name: '湖北',value: randomData() },
                {name: '广西',value: randomData() },
                {name: '甘肃',value: randomData() },
                {name: '山西',value: randomData() },
                {name: '内蒙古',value: randomData() },
                {name: '陕西',value: randomData() },
                {name: '吉林',value: randomData() },
                {name: '福建',value: randomData() },
                {name: '贵州',value: randomData() },
                {name: '广东',value: randomData() },
                {name: '青海',value: randomData() },
                {name: '西藏',value: randomData() },
                {name: '四川',value: randomData() },
                {name: '宁夏',value: randomData() },
                {name: '海南',value: randomData() },
                {name: '台湾',value: randomData() },
                {name: '香港',value: randomData() },
                {name: '澳门',value: randomData() }
            ]
        },
        {
            name: 'iphone4',
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '北京',value: randomData() },
                {name: '天津',value: randomData() },
                {name: '上海',value: randomData() },
                {name: '重庆',value: randomData() },
                {name: '河北',value: randomData() },
                {name: '安徽',value: randomData() },
                {name: '新疆',value: randomData() },
                {name: '浙江',value: randomData() },
                {name: '江西',value: randomData() },
                {name: '山西',value: randomData() },
                {name: '内蒙古',value: randomData() },
                {name: '吉林',value: randomData() },
                {name: '福建',value: randomData() },
                {name: '广东',value: randomData() },
                {name: '西藏',value: randomData() },
                {name: '四川',value: randomData() },
                {name: '宁夏',value: randomData() },
                {name: '香港',value: randomData() },
                {name: '澳门',value: randomData() }
            ]
        },
        {
            name: 'iphone5',
            type: 'map',
            mapType: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '北京',value: randomData() },
                {name: '天津',value: randomData() },
                {name: '上海',value: randomData() },
                {name: '广东',value: randomData() },
                {name: '台湾',value: randomData() },
                {name: '香港',value: randomData() },
                {name: '澳门',value: randomData() }
            ]
        }
    ]
};


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

如果还出现问题可参考这位道友的文章：http://blog.csdn.net/xuemoyao/article/details/16358571/

歚木xing
关注
专栏目录
echarts制作图表
sj1255897381的博客
07-07 317
echarts echart官方使用说明文档 首先添加本地echarts.js文档或者使用在线链接 根据说明文档添加示例： <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 va
Echarts图表制作
zs1342084776的博客
12-25 621
&lt;1&gt;常用到的参数 1)-i：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。 2)-o：生成的 bundle 文件，可以是绝对路径或者基于当前命令行路径的相对路径。 3)--min：是否压缩文件（默认不压缩），并且去多余的打印错误信息的代码，形成生产环境可用的文件。 4)--lang &lt;language shortcut or file path&gt;：...
Echarts的图表制作
t15263857960的博客
03-04 353
&lt;1&gt;常用到的参数 1)-i：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。 2)-o：生成的 bundle 文件，可以是绝对路径或者基于当前命令行路径的相对路径。 3)--min：是否压缩文件（默认不压缩），并且去多余的打印错误信息的代码，形成生产环境可用的文件。 4)--lang &lt;language shortcut or file path&gt;：是...
使用Echarts制作图表基础教程
weixin_44579862的博客
01-19 1883
在我们前端开发的过程中，会涉及到很多图表，如果用源生的js和css3制作的话，需要耗费大量的时间，同时代码量需求也比较大，那么我们在开发的过程中讲究的是效率，如果单单在制作图表的过程中就耗费了大量的时间，那么就没有什么效率可讲了，所以在这时候就需要用到我们的图表设计绘制工具：ECharts。 ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大...
如何用echarts组件制作图表
Qyingya的博客
09-27 1089
首先要把在官网上下载好的组件引入到项目中去。 要做图表先确定把它的宽度和高度设置好。 如果没设置好宽度和高度echarts可能会获取不到div初始化失效。 接下来有三步要走 第一步 初始化实例，第二步 指定图表的配置项和数据，第三步 使用刚刚指定图表的配置项和数据 进行第一步，基于准备好的dom元素，初始化echarts实例的操作 官网的实例中有各式各样的图表，如饼状图，柱状图，折线图等等 下图中是指定图表的配置项和数据，也就是对图表的渲染 Color跟css类似是用来调色，下图中分别写了两种颜色图表中
可控制管道内动态水流及左侧融合echarts图表（并自适应屏幕）
10-13
本项目聚焦于一个特定的需求——“可控制管道内动态水流及左侧融合echarts图表（并自适应屏幕）”，这涉及到几个关键的技术点，包括动态模拟、数据可视化和响应式设计。 首先，动态模拟管道内水流是工业场景中的一...
asp查询工资echarts图表显示.zip
06-17
ECharts则是一款由百度开源的，基于JavaScript的数据可视化库，能够制作出各种丰富的图表。 首先，我们需要理解ASP查询Access数据库的过程。Access是微软的一款关系型数据库管理系统，支持SQL语言进行数据操作。在...
jQuery基于echarts图表插件制作多组品牌销售数据统计柱状图表特效源码.zip
11-06
该资源是一个使用jQuery和ECharts图表插件创建的多组品牌销售数据统计柱状图表的源码示例。ECharts是一款由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，精美的图表效果，以及易于使用的API和...
echarts地图生成工具
02-22
ECharts 3地图生成工具,官网不让用了,可以在这里下载,双击index.html运行
图表制作办公首选--实用图表工具Echars
CODEING一场空的博客
06-24 1759
由于工作的需要，在写材料的时候需要使用到柱状图、饼状图、折线图等等展示数据，可以使用PPT等办公软件构建出图表，在这里可以使用更加方便、更加美观的工具Echars。
我做了一个可视化生成ECharts代码的应用，再也不用去看复杂的文档了...（附项目源码）
weixin_42678675的博客
06-22 1323
关于老板让我改个柱状颜色时，我看着ECharts文档懵圈的故事...（一个可视化生成常用ECharts代码的工具，拿去用！）
一款基于JAVA开发的Echarts后台生成框架
热门推荐
夜郎King的博客
07-12 1万+
本文分享一款基于Java开发的Echarts后台生成框架，支持自动生成Echarts的参数，通过生成Echarts饼图和折线图的实例化生成，让大家熟悉常见的开发方式，同时分析了官网示例存在的问题以及解决方案，希望对使用的朋友有所帮助。
用echarts实现一个简单的生成图表的功能
chaochao466的博客
09-11 2085
说实话一直想做一个可以生成图表的文件，但是一直研究不明白，曾经也看过很多的类似技术的文件，D3.js，Hcharts，Echarts都看过，但是看不下去，一个是api写的很死板，一个是自己事情比较多，今天不是很忙，简单的看了一下，写一个简单的生成图表，很简单，没有什么技术含量， 只是为了抛砖引玉，我写的只是稍微改了一点官方的例子，谁用的比较厉害的，是echarts的高阶玩家的，可以教我一下，一定虚...
echarts绘制图表
weixin_44543121的博客
05-17 2137
绘制图表
echarts 制作图表固定的三个步骤
weixin_45856239的博客
11-23 830
echarts 制作图表
【Map】Echarts之iphone销量地图的使用以及详细配置
weixin_30540691的博客
02-28 281
1.引入echarts库文件 <script charset="utf-8" type="text/javascript" language="javascript" src="echarts-2.2.7/doc/example/www/js/echarts.js"></script> 2.在页面中新建div用于地图展示 <div id="main" style="...
echarts图表曲线图
最新发布
12-10
以下是使用Echarts制作曲线图的示例代码： ```html <div id="chart"></div> import echarts from 'echarts' export default { mounted() { // 基于准备好的dom，初始化echarts实例 const myChart = ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值