在最近的一个图表切割项目中遇到，主流的实现图表的方法有两种:e charts和highcharts。前者是开发对apache运营的贡献，后者是国外比较知名的，但是国内用的比较多的是echarts。海图切割网qietu.com在海图开发和定制方面也有丰富的经验。比如下面这个，这个官网没有这个效果，但是柱形图比较接近，只有通过两种方式才能无限接近design draft。
唯一美中不足的是，图表中的参考线和方桌背景是图表本身的参数无法实现的，而css代码是弥补这一点的次佳选择。好在整体效果和设计稿一模一样。
var myChart = echarts . init)；option = {//background color:' # fafafa '，color: ["# 3b96ff "，" # f16862"]，//tooltip: {/trigger:'轴'，//轴指针:{//轴指示器，触发轴有效。// type: 'shadow' //默认为直线，可以是:' line' |' shadow'/}，//formatter:= > {//if return ' '//lets = params[0]。axisvaluelabel+'
'//for {///如果是负数，反过来//let d = iterator . data < 0-iterator . data:iterator.data// s+= iterator . marker+iterator . series name+':'+d+'
'//}//return s//}/}，工具提示:{//trigger:'轴'，轴指针:{//轴指示器，轴触发器有效。type: 'shadow' //默认为直线，可选:' line' |' shadow'}，formatter: = > {return "价格范围:1.19252~1.19252
}，legend:show:false，data: ['profit '，' loss']}，grid: {left:' 5 '，right:' 5 '，bottom:' 20px '，top: 10，//containlabel: true}，xaxis:[{ Axis line:show:false，lineStyle:{type:"dotted "，color:'blue'}，color//if return-value//else return value/}/}]，Yaxis: [{AxisLine: {show: false，lineStyle:{type:"dotted "，color:'blue'}}，axisTick: {show: false}，splitLine:{show: false，lineStyle:{type:"solid "，color:" # d7d 7 " }，SplitArea: {show: false}，//保留网格区域轴标签:{show: false，formatter:' {value} '，textstyle: {fontsize: 13，color:# 333 ' } }，type:'为 type//Column width item style:{// Column corner，mouse-up effect，如果只是一个数字，四个参数都设置这么多正常:{//Column corner，初始化效果BarborderRadius: [8，0，0，8]}}，Bargap:' 0% '，Label: {show: false}，data: [-20，-32，-10，-34，-20，-32，-10，-34，-20，-30，-10，-10，-20，-32，-10 意味着这四个参数都设置了这么多法线:{//柱形图圆角，初始化效果barborderradius: [0，8，8，0]}}，bargap:' 0% '，label: {show: false，position:' left '，formatter:= > {///值都是负数，所以需要反转return-value.data}}，data: [20，30，41，74，20，50，20，20，30，41，71，74，74，74，90，50，20，20，20 41, 74, 20, 50, 20,20, 30, 41, 74, 90, 50, 20,20, 30, 41, 74, 20]}]};//为echarts对象加载数据myChart.setOption
