分享7个常用的echarts示例

　　1、对于位置不够显示的坐标值，使用斜显示；
　　xAxisaxisLabelrotate设置倾斜角度；xAxis：｛type：category，axisLabel：｛color：b8e8fd，interval：0，rotate：30｝，axisLine：｛lineStyle：｛color：8dc1d8｝｝，axisTick：｛show：false｝，data：totalValueData。xData｝
　　2、对于坐标值比较长的名称，使用换行显示；
　　xAxisaxisLabelformatter设置换行格式；formatter：function（params）｛varnewParamsName；最终拼接成的字符串varparamsNameNumberparams。length；实际标签的个数varprovideNumber4；每行能显示的字的个数varrowNumberMath。ceil（paramsNameNumberprovideNumber）；换行的话，需要显示几行，向上取整判断标签的个数是否大于规定的个数，如果大于，则进行换行处理如果不大于，即等于或小于，就返回原标签条件等同于rowNumber1if（paramsNameNumberprovideNumber）｛循环每一行，p表示行for（varp0；prowNumber；p）｛vartempStr；表示每一次截取的字符串varstartpprovideNumber；开始截取的位置varendstartprovideNumber；结束截取的位置此处特殊处理最后一行的索引值if（prowNumber1）｛最后一次不换行tempStrparams。substring（start，paramsNameNumber）；｝else｛每一次拼接字符串并换行tempStrparams。substring（start，end）；｝newParamsNametempStr；最终拼成的字符串｝｝else｛将旧标签的值赋给新标签newParamsNameparams；｝将最终的字符串返回returnnewParamsName｝
　　3、对于坐标值超长的名称，使用省略号移上去显示；
　　xAxisaxisLabelformatter设置省略号格式；
　　增加tooltip，移上去显示详细内容；formatter：function（params）｛varnewParamsName；最终拼接成的字符串paramsparams。length6？params：params。substring（0，4）。。。；varparamsNameNumberparams。length；实际标签的个数varprovideNumber7；每行能显示的字的个数varrowNumberMath。ceil（paramsNameNumberprovideNumber）；换行的话，需要显示几行，向上取整判断标签的个数是否大于规定的个数，如果大于，则进行换行处理如果不大于，即等于或小于，就返回原标签条件等同于rowNumber1if（paramsNameNumberprovideNumber）｛循环每一行，p表示行for（varp0；prowNumber；p）｛vartempStr；表示每一次截取的字符串varstartpprovideNumber；开始截取的位置varendstartprovideNumber；结束截取的位置此处特殊处理最后一行的索引值if（prowNumber1）｛最后一次不换行tempStrparams。substring（start，paramsNameNumber）；｝else｛每一次拼接字符串并换行tempStrparams。substring（start，end）；｝newParamsNametempStr；最终拼成的字符串｝｝else｛将旧标签的值赋给新标签newParamsNameparams；｝将最终的字符串返回returnnewParamsName｝tooltip：｛trigger：axis，axisPointer：｛坐标轴指示器，坐标轴触发有效type：line默认为直线，可选为：lineshadow｝｝
　　4、修改折线图区域的渐变色；
　　seriesareaStyle设置渐变色的数据；areaStyle：｛normal：｛color：newecharts。graphic。LinearGradient（0，0，0，1，〔｛offset：0，color：rgba（21，144，229，1）｝，｛offset：1，color：rgba（21，144，229，0。1）｝〕，false），shadowColor：rgba（21，144，229，0。1），shadowBlur：10｝｝
　　5、饼图中间增加显示的内容；
　　title设置内容、位置和颜色等；title：〔｛text：合计总数，x：29，top：42，textStyle：｛color：5bb9fc，fontSize：sizeobj。s12｝｝，｛text：totalValue，x：30，top：50，textStyle：｛fontSize：sizeobj。s14，color：fff｝，｝〕
　　6、实现三色仪表盘；
　　全代码如下；varchartDom01document。getElementById（gauge1）；varmyChart01echarts。init（chartDom01）；varoption01；option01｛title：｛text：溶解氧（mgL），textStyle：｛color：b8e8fd，fontSize：12，fontWeight：normal｝，top：18｝，series：〔｛type：gauge，splitNumber：1，radius：93，center：〔50，52〕，startAngle：180，endAngle：0，min：0，max：50，pointer：｛show：true，width：7，length：60，borderColor：000，borderWidth：10，｝，axisLine：｛show：true，lineStyle：｛width：36，color：〔〔0，transparent〕，〔0。333333，ffb345〕，〔0。343333，transparent〕，〔0。666666，19aced〕，〔0。676666，transparent〕，〔1，fa7383〕〕，borderColor：000，borderWidth：10，｝，｝，axisLabel：｛show：true，color：fff，fontSize：12，distance：14，padding：〔30，0，0，0〕，formatter：function（value）｛returnvalue。toFixed（0）；｝，｝，刻度标签。axisTick：｛show：false，｝，刻度样式splitLine：｛show：false，length：28，lineStyle：｛color：fff，width：2，｝，｝，分隔线样式detail：｛show：true，formatter：〔｛a溶解氧｝，｛value｝〕。join（），fontSize：20，color：15cd96，width：100，height：320，padding：〔300，0，0，0〕，rich：｛a：｛color：fff，fontSize：12，padding：〔10，0，10，0〕，｝｝｝，title：｛show：false｝，data：〔｛value：2。77｝〕data：DOData｝〕｝；myChart01。clear（）；option01myChart01。setOption（option01）；
　　7、实现数据定时切换，适合多数据无法全显示情况；
　　全代码如下；varxallData〔晗宝SVANA的小店1，晗宝SVANA的小店2，晗宝SVANA的小店3，晗宝SVANA的小店4，晗宝SVANA的小店5，晗宝SVANA的小店6，晗宝SVANA的小店7，晗宝SVANA的小店8，晗宝SVANA的小店9，晗宝SVANA的小店10，晗宝SVANA的小店11，晗宝SVANA的小店12〕；varyallData〔535，452，348，214，119，200，352，148，247，150，250，180〕；varxData，yData；初始化xDataxallData。slice（0，5）；yDatayallData。slice（0，5）；updateChart（xData，yData）循环切换数据varnMath。ceil（xallData。length5）；向上取整varcur2，start，end；vartimersetInterval（function（）｛if（curn）｛cur1；｝；start（cur1）5；endcur5；xDataxallData。slice（start，end）；yDatayallData。slice（start，end）；updateChart（xData，yData）；cur；console。log（cur）｝，3000）；更新图表functionupdateChart（xData，yData）｛varmyChartsxyyecharts。init（document。getElementById（sxyy））；varoptionsxyy｛tooltip：｛trigger：axis，axisPointer：｛坐标轴指示器，坐标轴触发有效type：line默认为直线，可选为：lineshadow｝｝，grid：｛left：5，right：5，bottom：0，top：5，containLabel：true｝，xAxis：｛show：false，type：value｝，yAxis：〔｛type：category，inverse：true，axisLabel：｛show：true，textStyle：｛color：fff，margin：12，fontSize：12，lineHeight：15｝｝，splitLine：｛show：false｝，axisTick：｛show：false｝，axisLine：｛show：false｝，data：xData｝，｛type：category，inverse：true，axisTick：none，axisLine：none，show：true，axisLabel：｛textStyle：｛color：ffffff，fontSize：12｝，formatter：function（value）｛returnvalue。toLocaleString（）；｝，｝，data：yData｝〕，series：〔｛name：预约量，type：bar，zlevel：1，itemStyle：｛normal：｛barBorderRadius：30，color：newecharts。graphic。LinearGradient（0，0，1，0，〔｛offset：0，color：rgba（57，89，255，1）｝，｛offset：1，color：rgba（46，200，207，1）｝〕，false）｝，｝，barWidth：15，data：yData｝，｛name：最大值，type：bar，barWidth：15，barGap：100，data：〔1350，1350，1350，1350，1350〕，itemStyle：｛normal：｛color：rgba（24，31，68，1），barBorderRadius：30，｝｝，｝，〕｝；myChartsxyy。setOption（optionsxyy，true）；｝