echarts如何使用?
1、echarts要不要搭建什么环境啊,是不是直接导入js就可以了?
2、paths里面的echarts: 'http://echarts.baidu.com/build/dist'什么意思啊?
我直接写成下面的不显示图表
<body>
<div id="main" style="height:400px;width: 500px;border: 1px;border-color: red;background: blue;" ></div>
<div id="picturePlace"></div><!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
2、paths里面的echarts: 'http://echarts.baidu.com/build/dist'什么意思啊?
我直接写成下面的不显示图表
<body>
<div id="main" style="height:400px;width: 500px;border: 1px;border-color: red;background: blue;" ></div>
<div id="picturePlace"></div><!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
...全文
相关推荐
想玩Echarts不会JavaScript?pyEcharts搞定它!
Echarts 是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表 pyEcharts 是一个用于生成 Echarts 图表的类库,通过python实现与Echarts对接,通过python代码且无需JavaScript也可以实现Echarts 一、快速安装 首先我们先安装pyEcharts ,本文主要使用的 pyEcharts 为 0.5 版本,不过也可以尝试使用1.0等版本的pyEcharts,有需要可以阅读官方文档 pip i
详解Vue中使用Echarts的两种方式
主要介绍了Vue中使用Echarts的两种方式,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
在 webpack 中使用 ECharts的实例详解
主要介绍了在 webpack 中使用 ECharts的实例代码,需要的朋友可以参考下
使用echarts实现四象限散点图
1、文件夹下载下来后直接双击html文件即可看到效果; 2、项目中多次使用,保证稳定; 3、代码中有详细的介绍说明; 4、可以单独拿出来作为插件使用; 5、有问题欢迎留言,看到会解答;
高德地图使用echarts文档
需求想在高德地图上绘制echarts图表,百度地图同理,不会出现层级覆盖的问题


