百度Echarts设置markPoint展示样式

以下仅供参考~
效果图:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="https://lib.baomitu.com/echarts/4.7.0/echarts.js"></script></head><body><!-- Dom容器 --><div id="main" style="width: 100%;height:500px;"></div><script type="text/javascript">function showEchars() {let chart1 = echarts.getInstanceByDom(document.getElementById('main'));if (chart1 === undefined) {chart1 = echarts.init(document.getElementById('main'));};let option = {title: {text: 'Temperature Change in the Coming Week'},tooltip: {trigger: 'axis'},legend: {},toolbox: {show: true,feature: {dataZoom: {yAxisIndex: 'none'},dataView: {readOnly: false},magicType: {type: ['line', 'bar']},restore: {},saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value',axisLabel: {formatter: '{value} °C'}},color: ["#5470c6", "#91cc75", "#50aa9d"],series: [{name: 'Highest',type: 'line',data: [10, 11, 13, 11, 12, 12, 9],markPoint: {symbolSize: [0, 8], // 容器大小symbolOffset: [0, -9], //位置偏移data: [{type: 'max',name: '最大值'}, {type: 'min',name: '最小值'}],label: {offset: [0, 0],textStyle: {color: "#5470c6",fontSize: 15,},},},markLine: {data: [{type: 'average',name: 'Avg'}]}},{name: 'Lowest',type: 'line',data: [1, -2, 2, 5, 3, 2, 0],markPoint: {data: [{name: '周最低',value: -2,xAxis: 1,yAxis: -1.5}]},markLine: {data: [{type: 'average',name: 'Avg'},[{symbol: 'none',x: '90%',yAxis: 'max'},{symbol: 'circle',label: {position: 'start',formatter: 'Max'},type: 'max',name: '最高点'}]]}},{name: 'Lowest2',type: 'line',data: [2, -17, 5, 6, 2, 1, 2],markPoint: {// symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z,  path://m 0,0 h 48 v 20 h -34 l -6,10 l -6,-10 h -2 zitemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: '#F4515E' // 0% 处的颜色}, {offset: 1,color: '#21c3ae' // 100% 处的颜色}],globalCoord: false // 缺省为 false}},symbolSize: [50, 50], // 容器大小symbolOffset: [0, -20], //位置偏移data: [{type: 'max',name: '最大值'}, {type: 'min',name: '最小值'}],label: {offset: [0, 0],color: '#ffffff',formatter: ['2'].join('\n'),}},markLine: {data: [{type: 'average',name: 'Avg'},[{symbol: 'none',x: '90%',yAxis: 'max'},{symbol: 'circle',label: {position: 'start',formatter: 'Max'},type: 'max',name: '最高点'}]]}}]};chart1.clear();chart1.setOption(option, true);window.addEventListener("resize", function() {chart1.resize();});}showEchars()</script></body></html>

百度Echarts设置markPoint展示样式相关推荐

Echarts环形图设置空数据样式
需求背景由于最近的需求涉及到图表的展示,所以引入Echarts来渲染图表,但是问题也随之而来了,仔细阅读过文档后发现,Echarts对于环形图并没有能够设置默认样式的地方,对于空数据,界面直接就是空 ...
修改 echarts 默认样式记录，包含设置横向滚动条样式、坐标轴标签溢出 hover 显示全部
1.修改折线图上的数据标记点 showSymbol:false , 表示不展示数据点,只有鼠标 hover 时, tooltip 展示. series: [{name: '进场', // 名称,图例和 ...
echarts折线图拐点样式设置
echarts折线图拐点样式设置代码详情: series: [{name: '发文篇数',type: 'line',// smooth: true,showSymbol: true,symbol: ...
echarts设置饼状图的标示线以及标示文字的颜色等相关样式
一.代码和注释如下: var option ={series: [{name: 'KR完成比例',type: 'pie',//类型为饼图radius: ['30%', '50%'],//饼图的半径,一 ...
百度echarts使用
百度echarts,将数据以图表方式展示: var startDate; var endDate; $(document).ready(function() {startDate = $(" ...
百度eCharts体验
http://echarts.baidu.com/echarts2/doc/start.html 前言从昨天开始给项目里添加一些图表对比功能,上一个项目里使用的是Highcharts,本打算继续用H ...
echarts中x轴文件消失_百度Echarts图表在Vue项目的完整引入以及按需加载
导语近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择.项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了.亲自动手实践了下,整理总结,希望对小伙伴提供 ...
WPF仿百度Echarts人口迁移图
关于大名鼎鼎的百度Echarts我就不多说了不了解的朋友直接看官方的例子吧 http://echarts.baidu.com/examples.html 前阵子我加入了一个WPF的技术交流群此de ...
html如何设置四个链接,HTML基础（四）——设置超链接的样式示例
***设置超链接的样式示例 a:link超链接被点前状态 a:visited超链接点击后状态 a:hover悬停在超链接时 a:active点击超链接时在定义这些状态时,有一个顺序l v h a 代 ...

百度Echarts设置markPoint展示样式

百度Echarts设置markPoint展示样式相关推荐

最新文章

热门文章