console
var option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['最高气温', '最低气温']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
restore: {},
saveAsImage: {},
myLineMarkerTool:{
show: true,
title: '添加标注线',
icon: 'path://M479.981402 897.830059l224.427758-224.427757 84.152969 84.212484-224.427757 224.368243zM255.553644 785.586423L137.299082 383.628037a77.903987 77.903987 0 0 1-22.020226 4.523073A79.39184 79.39184 0 0 1 35.94653 308.75927a79.39184 79.39184 0 0 1 79.332326-79.39184 78.261072 78.261072 0 0 1 59.990236 28.983378l496.823899-83.676857A158.188539 158.188539 0 0 1 829.448332 29.816576a158.664652 158.664652 0 0 1 158.664652 158.724166 158.664652 158.664652 0 0 1-158.664652 158.664651 158.664652 158.664652 0 0 1-144.738347-94.032314L202.348018 334.350343l389.87702 114.683715 84.15297 196.396606-224.427758 224.487272z m-90.520981-416.598861l210.501453 255.910729a79.034755 79.034755 0 0 0 20.294316 76.35662 79.272812 79.272812 0 0 0 112.184122 0 79.39184 79.39184 0 0 0 0-112.184122 79.272812 79.272812 0 0 0-76.416134-20.294316l-255.910729-210.560967a84.688597 84.688597 0 0 1-10.653028 10.772056z',
onclick: function (){
layui.layer.open({
type: 1,
title:'线标注',
area:['400px','300px'],
content:$('#lineMakerLayerTpl').html(),
btn:['确认','取消'],
success:function(){
layui.form.render();
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#lineColorPicker', //绑定元素
color:'#000000',
predefine:true,
done:function(color){
$("#lineColor").val(color);
}
});
},
yes:function(index, layero){
var lineType = $("#lineType").val();
var lineColor = $("#lineColor").val();
var lineWidth = $("#lineWidth").val();
drawLine(myChart,lineType,lineColor,lineWidth);
layui.layer.close(index);
}
});
}
},
myIconMarkerTool:{
show: true,
title: '添加标注点',
icon: 'path://M345.68 395.064c0-92.976 78.08-168.496 174.2-168.496 96.112 0 174.192 75.52 174.192 168.496 0 92.976-78.08 168.504-174.192 168.504-96.12 0-174.2-75.528-174.2-168.504zM520.368 16h-0.864C303.552 16.24 128 186.296 128 395.184c0 106 87.096 256.696 172.464 379.184A2650.68 2650.68 0 0 0 459.096 979.2c14.824 18.048 37.184 28.56 61.024 28.8h0.128c23.6-0.24 45.84-10.64 60.536-28.56a2679.264 2679.264 0 0 0 158.752-205.072C824.896 652 912 501.184 912 395.184 911.88 186.176 736.2 16.12 520.368 16z',
onclick: function (){
layui.layer.open({
type: 1,
title:'点标注',
area:['400px','300px'],
content:$('#iconMakerLayerTpl').html(),
btn:['确认','取消'],
success:function(){
layui.form.render();
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#iconColorPicker', //绑定元素
color:'#000000',
predefine:true,
done:function(color){
$("#iconColor").val(color);
}
});
},
yes:function(index, layero){
var iconType = $("#iconType").val();
var iconColor = $("#iconColor").val();
var iconSize = $("#iconSize").val();
drawIcon(myChart,iconType,iconColor,iconSize);
layui.layer.close(index);
}
});
}
},
myTextMarkerTool:{
show: true,
title: '添加文字标注',
icon: 'path://M793.088 265.9328a34.16064 34.16064 0 0 0-31.8464-22.1184H264.192c-14.6432 0-27.0336 9.216-31.9488 22.1184-1.9456 3.584-3.1744 7.68-3.1744 12.0832v127.8976a25.6 25.6 0 0 0 51.2 0V312.32h198.144v456.704h-57.2416a25.6 25.6 0 0 0 0 51.2H606.208a25.6 25.6 0 0 0 0-51.2h-59.2896V312.32h198.144v93.696a25.6 25.6 0 0 0 51.2 0V278.1184c0-4.4032-1.2288-8.4992-3.1744-12.1856z',
onclick: function (){
layui.layer.open({
type: 1,
title:'点标注',
area:['400px','300px'],
content:$('#iconMakerLayerTpl').html(),
btn:['确认','取消'],
success:function(){
layui.form.render();
var colorpicker = layui.colorpicker;
//渲染
colorpicker.render({
elem: '#fontColorPicker', //绑定元素
color:'#000000',
predefine:true,
done:function(color){
$("#fontColor").val(color);
}
});
},
yes:function(index, layero){
var fontFamily = $("#fontFamily").val();
var fontColor = $("#fontColor").val();
var fontSize = $("#fontSize").val();
drawIcon(myChart,iconType,iconColor,iconSize);
layui.layer.close(index);
}
});
}
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: '最高气温',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10]
},
{
name: '最低气温',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0]
}
]
};
var myChart = echarts.init(document.getElementById('chartDiv'));
myChart.setOption(option);
var myLineDash = {solid:null,dashed:[5,5],dotted:[1,3]};
function drawLine(chart,lineType,lineColor,lineWidth){
var zr = chart.getZr();
var chartOption = chart.getOption();
var isDrawing = false;
var startX = 0 , startY = 0;
zr.off("click");
zr.off("mousemove");
zr.on("click",function(param){
if(!isDrawing){
startX = param.offsetX;
startY = param.offsetY;
isDrawing = true;
}else{
isDrawing = false;
var serieData = [];
var startCoord = chart.convertFromPixel('grid', [startX,startY]);
var endCoord = chart.convertFromPixel('grid', [param.offsetX,param.offsetY]);
if(chartOption.xAxis.type=='category'){
startCoord[0] = Number(startCoord[0].toFixed(0));
endCoord[0] = Number(endCoord[0].toFixed(0));
for(var i=0;i<chartOption.xAxis.data.length;i++){
if(i==startCoord[0]){
serieData.push(startCoord[1]);
}else if(i==endCoord[0]){
serieData.push(endCoord[1]);
}else{
serieData.push('-');
}
}
}else{
serieData.push(startCoord);
serieData.push(endCoord);
}
chartOption.series.push({
type:'line',
connectNulls:true,
lineStyle:{
type:lineType,
color:lineColor,
width:lineWidth
},
data:serieData
});
if(!!axShape) zr.remove(axShape);
chart.setOption(chartOption,false);
chart.resize();
zr.off('click');
zr.off('mousemove');
}
});
var axShape;
zr.on("mousemove",function(param){
if(isDrawing){
if(!!axShape) zr.remove(axShape);
axShape = new echarts.graphic.Line({
shape: {
x1:startX,
y1:startY,
x2:param.offsetX,
y2:param.offsetY
},
style: {
stroke:lineColor,
lineWidth:lineWidth,
lineDash:myLineDash[lineType]
}
});
zr.add(axShape);
}
});
}
function drawIcon(chart,iconType,iconColor,iconSize){
var zr = chart.getZr();
var chartOption = chart.getOption();
var isDrawing = true;
zr.off("click");
zr.off("mousemove");
if(!chartOption.series[0].markerPoint){
chartOption.series[0].markerPoint = {
data:[{
symbol:iconType,
color:iconColor,
symbolSize:iconSize,
x:0,
y:0
}]
}
}else{
chartOption.series[0].markerPoint.data.push({
symbol:iconType,
color:iconColor,
symbolSize:iconSize,
x:0,
y:0
});
}
chart.setOption(chartOption,false);
zr.on("click",function(param){
if(isDrawing){
chartOption.series[0].markerPoint.data[chartOption.series[0].markerPoint.data.length - 1].x = param.offsetX;
chartOption.series[0].markerPoint.data[chartOption.series[0].markerPoint.data.length - 1].y = param.offsetY;
chart.setOption(chartOption,false);
zr.off("click");
zr.off("mousemove");
isDrawing = false;
}
});
zr.on("mousemove",function(param){
if(isDrawing){
chartOption.series[0].markerPoint.data[chartOption.series[0].markerPoint.data.length - 1].x = param.offsetX;
chartOption.series[0].markerPoint.data[chartOption.series[0].markerPoint.data.length - 1].y = param.offsetY;
chart.setOption(chartOption,false);
}
});
}
function drawText(chart,fontFamily,fontColor,fontSize,markerContent){
var zr = chart.getZr();
var chartOption = chart.getOption();
var isDrawing = true;
zr.off("click");
zr.off("mousemove");
if(!chartOption.series[0].markerPoint){
chartOption.series[0].markerPoint = {
data:[{
symbol:'none',
label:{
color:fontColor,
fontFamily:fontFamily,
fontSize:fontSize
},
x:0,
y:0
}]
}
}else{
chartOption.series[0].markerPoint.data.push({
symbol:'none',
label:{
color:fontColor,
fontFamily:fontFamily,
fontSize:fontSize
},
x:0,
y:0
});
}
chart.setOption(chartOption,false);
zr.on("click",function(param){
if(isDrawing){
chartOption.series[0].markerPoint.data[chartOption.series[0].markerPoint.data.length - 1].x = param.offsetX;
chartOption.series[0].markerPoint.data[chartOption.series[0].markerPoint.data.length - 1].y = param.offsetY;
chart.setOption(chartOption,false);
zr.off("click");
zr.off("mousemove");
isDrawing = false;
}
});
zr.on("mousemove",function(param){
if(isDrawing){
chartOption.series[0].markerPoint.data[chartOption.series[0].markerPoint.data.length - 1].x = param.offsetX;
chartOption.series[0].markerPoint.data[chartOption.series[0].markerPoint.data.length - 1].y = param.offsetY;
chart.setOption(chartOption,false);
}
});
}
<div id="chartDiv" style="width: 600px;height:400px;"></div>
<script id="lineMakerLayerTpl" type="text/html">
<form id="fm" class="layui-form" method="post">
<div class="layui-form-item" style="margin-top:10px">
<div class="layui-inline">
<label class="layui-form-label">线型</label>
<div class="layui-input-block">
<select name="lineType" id="lineType">
<option value="solid">实线</option>
<option value="dashed">虚线</option>
<option value="dotted">点线</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">颜色</label>
<div class="layui-input-inline">
<input type="hidden" id="lineColor" value="#000000" />
<div id="lineColorPicker"></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">线宽</label>
<div class="layui-input-block">
<input type="text" maxlength="9" class="layui-input" id="lineWidth" name="lineWidth" value="1"/>
</div>
</div>
</div>
</form>
</script>
<script id="iconMakerLayerTpl" type="text/html">
<form id="fm" class="layui-form" method="post">
<div class="layui-form-item" style="margin-top:10px">
<div class="layui-inline">
<label class="layui-form-label">图标</label>
<div class="layui-input-block">
<select name="iconType" id="iconType">
<option value="circle">圆形</option>
<option value="rect">矩形</option>
<option value="roundRect">圆角矩形</option>
<option value="triangle">三角形</option>
<option value="diamond">菱形</option>
<option value="pin">注记</option>
<option value="arrow">箭头</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">颜色</label>
<div class="layui-input-inline">
<input type="hidden" id="iconColor" value="#000000" />
<div id="iconColorPicker"></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">半径</label>
<div class="layui-input-block">
<input type="text" maxlength="9" class="layui-input" id="iconSize" name="iconSize" value="32"/>
</div>
</div>
</div>
</form>
</script>
<script id="textMakerLayerTpl" type="text/html">
<form id="fm" class="layui-form" method="post">
<div class="layui-form-item" style="margin-top:10px">
<div class="layui-inline">
<label class="layui-form-label">字体</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="fontFamily" name="fontFamily" value="Microsoft Yahei"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">颜色</label>
<div class="layui-input-inline">
<input type="hidden" id="fontColor" value="#000000" />
<div id="fontColorPicker"></div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">字体大小</label>
<div class="layui-input-block">
<input type="text" maxlength="9" class="layui-input" id="fontSize" name="fontSize" value="20"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">内容</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="markerContent" name="markerContent" value=""/>
</div>
</div>
</div>
</form>
</script>