echart 正负图

$(function() {

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

option = {
                   title: [
                       {
                           text: '正负条形图',
                           left: 'center',
                           top: 20,
                           textStyle: {
                               color: 'blue',
                               //fontSize: '14',
                           },
                       },
                       {
                           text: '实验室',
                           //borderColor: '#999',
                           //borderWidth: 1,
                           textStyle: {
                               fontSize: 14
                           },
                           left: 'center',
                           top: '88%'
                       },
                   ],
                   tooltip: {
                       trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                       axisPointer: { // 坐标轴指示器，坐标轴触发有效
                           type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |'cross'
                       }
                   },
                   legend: {
                       data: ['利润', '支出', '收入'],
                       //bottom: '0',
                   },
                   grid: {
                       left: '10%',
                       right: '10%',
                       bottom: '15%',
                       containLabel: true
                   },
                   xAxis: [{
                       type: 'category',
                       axisTick: { //坐标轴刻度相关设置。
                           show: false,
                       },
                       data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
//                       axisLine: {
//                           //show: true, //是否显示坐标轴轴线。
//                           //onZero:false,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
//                           //symbol:'arrow', //轴线两边的箭头
                           lineStyle: {
                               width: 2,
                               color: 'green',
                           },
//                       },

                   }],
                   yAxis: [{
                       type: 'value',
                       name: 'Z值',
                       nameLocation: 'center',
                       nameGap: 40
                   }],
                   series: [
                       {
                           name: '利润',
                           type: 'bar',
                           label: { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                               normal: { //正常情况
                                   show: true, //是否显示标签
                                   position: 'inside', //标签的位置。
                                   distance: 5, //距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。default: 5
                                   rotate: 0, //标签旋转。从 -90 度到 90 度。正值是逆时针。

                               }
                           },
                           data: [200, 170, 240, 244, 200, 220, 210]
                       },
                       {
                           name: '收入',
                           type: 'line',
                           stack: '总量', //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
                           label: {
                               normal: {
                                   show: true, //是否显示标签
                                   position: 'inside', //标签的位置。
                               }
                           },
                           data: [320, 302, 342, 374, 390, 450, 420]
                       },
                       {
                           name: '支出',
                           type: 'bar',
                           stack: '总量',
                           label: {
                               normal: {//正常情况
                                   show: true, //是否显示标签
                                   position: 'inside'
                               }
                           },
                           data: [-120, -132, -102, -134, -190, -230, -210]
                       }
                   ]
               };

               //myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画


               // 使用刚指定的配置项和数据显示图表。
               myChart.setOption(option);

});

</script>

效果如下：

echart 正负图相关推荐

echart雷达图详细配置
echart雷达图参数配置我是个搬运工,这里是搬运别的大佬的.之前网上找了好久才找到的配置,怕下次难得找,直接搬过来了原链接:原链接 // 指定图表的配置项和数据 var option = {ba ...
echart折线图连线不显示问题总结
echart折线图,series动态数据不能有空数据,不然,只有数据点,而连线出不来.
echart 扇形图，玫瑰图配置说明
echart 扇形图,玫瑰图配置说明先看效果配置说明官方配置说明: https://echarts.apache.org/zh/option.html#series-pie option :{l ...
echart折线图，柱状图，饼图设置颜色
转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain ...
echart 折线图、柱状图、饼图、环形图颜色修改
之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain copy ...
预测股市？echart折线图展示CPI，PPI剪刀差和股市的关系
CPI:消费者物价指数,代表群众购买物品的价格的增长率.我们可以很暴力的认为CPI就是公司的物品售价增长率. PPI:工业生产者出产价格指数,顾名思义是公司生产物品的成本价的增长率. 如果我们用CPI ...
echart折线图 -- 每条线分别对应不同x、y轴数据
代码示例 option = {legend: {data:['曲线1', '曲线2']},tooltip : {trigger: 'axis',axisPointer: {type: 'cross', ...
echart瀑布图横向图
1.如上图所示:实现横向瀑布图借鉴echart得性能分析图,其中的renderItem方法可以自定义模块代码如下:
百度echart柱图、折线图、饼图、Map类型等类似视图的动态加载数据
这几天接触的一个项目需要使用到百度的echart,所以简单查找并实验了几款比较简单且适用性较广的例子,做了几个简单的Demo,一来是对echart有所了解,二来也是记录一下,方便以后进一步的优化. 首 ...

echart 正负图

echart 正负图相关推荐

最新文章

热门文章