sublime中echart动态代码块

模板路径：C:\Users\GCR\AppData\Roaming\Sublime Text 3\Packages\User

1、dom

创建一个容器。

<snippet>
	<content><![CDATA[
<div id="main" style="width: ${1:width};height: ${2:height};"></div>
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>dom</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

2、myChartinit

初始化一个echarts的实例。

<snippet>
	<content><![CDATA[
var myChart=echarts.init(document.getElementById("main"));
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>myChartinit</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

3、myChartsetOption

运行这个echarts实例。

<snippet>
	<content><![CDATA[
myChart.setOption(option);
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>myChartsetOption</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>source.js</scope>
</snippet>

4、x

xAxis这个组件的缩写形式。

<snippet>
	<content><![CDATA[
xAxis: [
	{
		type: "category",
		data: [${1}]
	}
],
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>x</tabTrigger> 
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!--果然是这样的哈，在html中<script>里面的代码属于js部分，所以这个范围作用域设置为js才行的哈 -->
	<scope>source.js</scope>
</snippet>

​

5、y

yAxis的缩写

<snippet>
	<content><![CDATA[
yAxis: [
	{
		type:"value"${1}
	}
],
${2}
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>y</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	 <scope>source.js</scope>
</snippet>

6、tooltip

<snippet>
	<content><![CDATA[
tooltip: {
    trigger: "${1}"${2}
},
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>tooltip</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>source.js</scope>
</snippet>

7、axisPointer

坐标轴指示配置项

<snippet>
	<content><![CDATA[
axisPointer: {
	type: "cross",
	 label:{ 
	    color:"${1}"
	 }
}
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>axisPointer</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>source.js</scope>
</snippet>

8、ntd

series输入数据的名称，类型，数据

<snippet>
	<content><![CDATA[
{
	name: "${1}",
	type: "${2}",
	data:[${3}]
}
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>ntd</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>source.js</scope>
</snippet>

9、title

title组件的快捷输入方式

<snippet>
	<content><![CDATA[
title: {
	text: "${1}",
	subtext: "${2}"	
},
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>title</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>source.js</scope>
</snippet>

10、echartjs

引入echart.js文件

<snippet>
	<content><![CDATA[
<script type="text/javascript" src="echarts.js"></script>
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>echartjs</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!--<scope>source.html</scope> -->
</snippet>

11、toolbox

工具栏，在图表右上角对图表进行不同操作的工具。

<snippet>
	<content><![CDATA[
toolbox: {
    show: true,
    feature: {
    	dataZoom: {  //数据区域缩放
    		show: ${1:true}
    	},
    	dataView: {  // 数据视图
    		show: ${2:true},
    		readOnly:true
    	},
    	magicType: { // 动态类型的切换
    		show: ${3:true},
    		type:["${4}","${5}"]
    	},
    	restore: {  //还原
    		show: ${6:true}
    	},
    	saveAsImage: { // 保存为图片
    		show: ${7:true}  // 是否显示该工具，true表示显示
    	}
    }
},

]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>toolbox</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>source.js</scope>
</snippet>

 

实时更新中。。。。。