echartspython教程_Echarts⼊门(零基础⼩⽩教程)
前⾔
适合0前端基础的⼩⽩,什么配置啊,不会啊,我就想画个图先,没问题,按照步骤做,先来实现第⼀个图,之后官⽅教程会教会你更多的。
下载echarts
⼩⽩建议,直接下完整版,先搞清楚怎么画出⼀张图再说点击这⾥下载Echarts,进⼊链接,选择完整版下载,之后会得到⼀个echarts.min.js的⼀个js脚本,别管他,先放着。
新建⼀个html⽂件
我这⾥取名为echartstest.html,然后将下⾯的内容贴上(我这⾥直接拽官⽅⽂档来了,例⼦⼀样。)
ECharts
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.ElementById('main'));
myChart.setOption({
backgroundColor: '#2c343c',
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:400, name:'搜索引擎'},
python多线程返回值{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:274, name:'联盟⼴告'},
{value:235, name:'视频⼴告'}
],
roseType: 'angle',
itemStyle: {
emphasis: {hairdryer是什么意思
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
}
}
]
})
这⾥在重申⼀下路径问题,如下图所⽰
这⾥写图⽚描述
编辑完后保存,之后双击echartstest.html⽂件,就会打开⼀个⽹页,你看⼀个图就做好了!
这⾥写图⽚描述
是不是很简单呢,本来就是嘛,你看,你不会前端,不会js,不会jquery,照样可以画很好看的图(但是想要深⼊理解,还是绕不过js等前端语⾔的)
在地图上画图
经常看到有很多在地图上作图的,就像这样,⼩⽩容易遇到的就是,我tm都copy代码了,为啥显⽰不出来,原因就是需要下载⼀个地
图“底板”
这⾥写图⽚描述
processing创意代码没关系,百度已经封装好了成js,下载下来就好echarts地图下载这⾥说明⼀下,有两个版本,⼀个是json⼀个是js的,不同的版本包导⼊的⽅式不⼀样,下⾯都会有说明,为了⽅便⼩⽩,请下载js的版本进⾏使⽤。
步骤和以前的⼀样,只是在加载echarts.min.js的同时,再加载⼀次下载的js,如果下载的是世界地图,那么加载world.js即可⽂件层次像这样
python入门教程 下载这⾥写图⽚描述
然后我们只需要把echartstest.html修改代码就可以了。option部分请参考官⽹,注意这⾥引⽤world.js,⽽官⽹⾥⾯提供的只是option部分的代码⽽已,这会让零基础⼩⽩⼀脸懵逼,要给程序就给全嘛,真是的。其实,其余的都不需要改变,初始化echarts实例(var myChart = echarts.ElementById('main'))),和最后的使⽤刚指定的配置项和数据显⽰图表(myChart.setOptions(option)这句话)
这⾥写图⽚描述
Pay Attention
官⽅实例永远是最好的⼊门,最好敲⼀遍,理解其中的意义
matlab求基础解系echarts是纯js写的,所以最好学习js
熟悉之后最好使⽤源代码版本,会有错误提⽰
Update
这⾥更新下,如何使⽤echarts CDN来进⾏图表构建,简单说,就是在联⽹的情况下,只要复制以下代码到⼀个html⽂件中,双击就可以运⾏图表,⽤在不可加载包的地⽅很合适
ECharts
paths: {
echarts: 'echarts.baidu/build/dist'
}游戏数据库修改
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line' // 这⾥加载什么类型图时候就写什么,具体参考echatrs API
],
function (ec) {
var myChart = ec.ElementById('main'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['HERE','AVERAGE']
},
xAxis: [
{
type: 'category',
data: ["avg_time_ok","avg_dis_ok","avg_time_dis_ok","avg_zero_call","avg_time_dis_call_ok","avg_badcase"], axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: 'HERE RATE',
min: 0,
max: 1,
},
{
type: 'value',
name: 'AVERAGE RATE',
min: 0,
max: 1,
}
],
{
name:'HERE',
type:'bar',
data:[{avg_time_ok},{avg_dis_ok}, {avg_time_dis_ok}, {avg_zero_call}, {avg_time_dis_call_ok}, {avg_badcase}], label: {
normal: {
show: true,
//position: 'top'
}
},
},
{
name:'AVERAGE',
type:'line',
yAxisIndex: 1,
data:[0.7852, 0.5496, 0.4562, 0.2448, 0.1467, 0.1024]
}
]
};
myChart.setOption(option);
}
);
效果如图所⽰
这⾥写图⽚描述
致谢
总结
其实我也什么都不会,上⾯都是我胡编的,你们过来打我呀
这⾥写图⽚描述
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论