简书 echarts mysql_echarts入门教程

最新推荐文章于 2023-10-31 15:50:37 发布
最新推荐文章于 2023-10-31 15:50:37 发布
阅读量547 收藏
点赞数
文章标签： 简书 echarts mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_29752191/article/details/113635458
版权

一、echarts介绍

ECharts是由百度团队开发的，可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender，是一个纯JavaScript的图标库，兼容(IE8/9/10/11，Chrome，Firefox，Safari等)主流浏览器，可以运行在PC和移动设备上。

二、完成一个简单图标

废话不多说，一起来完成一个简单的图表，体验一下ECharts的神奇吧！

1.引入ECharts

ECharts3开始不再强制使用AMD的方式按需引入，那么简单粗暴，直接在官网下载所需ECharts文件，像引入普通JavaScript库一样用script标签引入即可。简单吧，看代码：

ECharts入门

注：建议把js文件放在body下方

2.准备一个具备宽高的DOM容器

3.初始化一个echarts实例

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

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

4.指定图表的配置项和数据

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

var option = {

title:{

text:'EChars入门'

},

//提示框组件

tooltip:{

//坐标轴触发，主要用于柱状图，折线图等

trigger:'axis'

},

//图例

legend:{

data:['销量']

},

//横轴

xAxis:{

data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

//纵轴

yAxis:{},

//系列列表。每个系列通过type决定自己的图表类型

series:[{

name:'销量',

//折线图

type:'line',

data:[5, 20, 36, 10, 10, 20]

}]

};

5.显示图标

//使用刚指定的配置项和数据显示图表

myChart.setOption(option);

6.完整代码

ECharts入门

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

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

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

var option = {

title:{

text:'EChars入门'

},

//提示框组件

tooltip:{

//坐标轴触发，主要用于柱状图，折线图等

trigger:'axis'

},

//图例

legend:{

data:['销量']

},

//横轴

xAxis:{

data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

//纵轴

yAxis:{},

//系列列表。每个系列通过type决定自己的图表类型

series:[{

name:'销量',

//折线图

type:'line',

data:[5, 20, 36, 10, 10, 20]

}]

};

//使用刚指定的配置项和数据显示图表

myChart.setOption(option);

7.生成图表，如图：

82f966e9b7cf

image

就这样，一个漂亮的图表生成了，是不是很简单呢？

饼图例子

ECharts入门

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

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

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

var option = {

title : {

text: '用户动态类型',

subtext: '数据来源: www.jianshu.com',

x:'center'

},

tooltip : {

trigger: 'item',

formatter: "{a}
{b} : {c} ({d}%)"

},

clockwise:false,

legend: {

orient: 'vertical',

left: '10%',

data: ['发表评论','喜欢文章','赞赏文章','发表文章','关注用户','关注专题','点赞评论','关注文集']

},

color:['#FF6666','#EFE42A','#64BD3D','#EE9201','#29AAE3',

'#B74AE5','#0AAF9F','#E89589'],

series : [

{

name: '动态类型',

type: 'pie',

radius : '75%',

center: ['50%', '60%'],

data:[{"name": "\u53d1\u8868\u8bc4\u8bba", "value": 6559}, {"name": "\u559c\u6b22\u6587\u7ae0", "value": 1591}, {"name": "\u8d5e\u8d4f\u6587\u7ae0", "value": 468}, {"name": "\u53d1\u8868\u6587\u7ae0", "value": 136}, {"name": "\u5173\u6ce8\u7528\u6237", "value": 1}, {"name": "\u5173\u6ce8\u4e13\u9898", "value": 1}, {"name": "\u70b9\u8d5e\u8bc4\u8bba", "value": 31}, {"name": "\u5173\u6ce8\u6587\u96c6", "value": 11}],

itemStyle: {

emphasis: {

shadowBlur: 100,

shadowOffsetX: 10,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

};

//*必须，绑定图表自适应功能

window.onresize = function () {

myChart.resize();

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

82f966e9b7cf

image

折线图

ECharts入门

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

var myChart1 = echarts.init(document.getElementById('monthline_chart'));

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

var option = {

// Make gradient line here

visualMap: {

show: false,

type: 'continuous',

seriesIndex: 0,

color:['red','orange','yellow','lightskyblue']

},

title: {

left: 'center',

text: '各个月份的动态次数',

subtext:'数据来源: www.jianshu.com'

},

tooltip: {

trigger: 'axis'

},

xAxis: {

data: ["2016-08", "2016-09", "2016-10", "2016-11", "2016-12", "2017-01", "2017-02", "2017-03", "2017-04", "2017-05", "2017-06", "2017-07", "2017-08", "2017-09", "2017-10", "2017-11", "2017-12", "2018-01", "2018-02", "2018-03", "2018-04", "2018-05", "2018-06", "2018-07", "2018-08"],

name:'月份'

},

yAxis: {

splitLine: {show: false},

name:'动态次数'

},

grid: {

bottom: '6%',

top: '10%'

},

series: {

type: 'line',

showSymbol: false,

data: [9, 77, 273, 523, 509, 678, 1008, 974, 308, 316, 605, 273, 356, 210, 354, 300, 192, 243, 192, 390, 219, 282, 226, 210, 72],

markPoint : {

data : [

{type : 'max',

name: '最大值'

}

]

},

markLine: {

data: [

{type: 'average', name: '平均值',

label: {

normal: {

position: 'end',

formatter: '月平均值:{c}'

}

}},

{type: 'max', name: '最大值',

label: {

normal: {

position: 'end',

formatter: '最大值'

}

}}

]

}

}

};

//*必须，绑定图表自适应功能

window.onresize = function () {

myChart1.resize();

};

// 使用刚指定的配置项和数据显示图表。

myChart1.setOption(option);

82f966e9b7cf

image

波浪图

ECharts入门

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

var myChart2 = echarts.init(document.getElementById('dayline_chart'));

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

var option = {

// Make gradient line here

visualMap: {

show: false,

type: 'continuous',

seriesIndex: 0,

color:['red','orange','yellow','lightskyblue']

},

title: {

left: 'center',

text: '每天的动态次数(页内滚动鼠标或拖动下方进度条，可缩放数据)',

subtext:'数据来源: www.jianshu.com'

},

tooltip: {

trigger: 'axis'

},

xAxis: {

data: ["2016-08-25", "2016-08-30", "2016-08-31", "2016-09-01", "2016-09-02", "2016-09-03", "2016-09-04", "2016-09-05", "2016-09-06", "2016-09-07", "2016-09-08", "2016-09-09", "2016-09-10", "2016-09-11", "2016-09-12", "2016-09-13", "2016-09-15", "2016-09-16", "2016-09-22", "2016-09-23", "2016-09-26", "2016-09-27", "2016-09-28", "2016-09-29", "2016-09-30", "2016-10-01", "2016-10-02", "2016-10-03", "2016-10-04", "2016-10-05", "2016-10-06", "2016-10-07", "2016-10-08", "2016-10-09", "2016-10-10", "2016-10-11", "2016-10-12", "2016-10-13", "2016-10-14", "2016-10-15", "2016-10-16", "2016-10-17", "2016-10-18", "2016-10-19", "2016-10-20", "2016-10-21", "2016-10-22", "2016-10-25", "2016-10-26", "2016-10-27", "2016-10-28", "2016-10-29", "2016-10-30", "2016-10-31", "2016-11-01", "2016-11-02", "2016-11-03", "2016-11-04", "2016-11-05", "2016-11-06", "2016-11-07", "2016-11-08", "2016-11-09", "2016-11-10", "2016-11-11", "2016-11-13", "2016-11-14", "2016-11-15", "2016-11-16", "2016-11-17", "2016-11-18", "2016-11-19", "2016-11-20", "2016-11-21", "2016-11-22", "2016-11-23", "2016-11-24", "2016-11-25", "2016-11-26", "2016-11-27", "2016-11-28", "2016-11-29", "2016-11-30", "2016-12-01", "2016-12-02", "2016-12-03", "2016-12-04", "2016-12-05", "2016-12-06", "2016-12-07", "2016-12-08", "2016-12-09", "2016-12-10", "2016-12-11", "2016-12-12", "2016-12-13", "2016-12-14", "2016-12-15", "2016-12-16", "2016-12-17", "2016-12-18", "2016-12-19", "2016-12-20", "2016-12-21", "2016-12-22", "2016-12-23", "2016-12-24", "2016-12-25", "2016-12-26", "2016-12-27", "2016-12-28", "2016-12-29", "2016-12-30", "2016-12-31", "2017-01-01", "2017-01-02", "2017-01-03", "2017-01-04", "2017-01-05", "2017-01-06", "2017-01-07", "2017-01-08", "2017-01-09", "2017-01-10", "2017-01-11", "2017-01-12", "2017-01-13", "2017-01-14", "2017-01-15", "2017-01-16", "2017-01-17", "2017-01-18", "2017-01-19", "2017-01-20", "2017-01-21", "2017-01-22", "2017-01-23", "2017-01-24", "2017-01-25", "2017-01-26", "2017-01-27", "2017-01-28", "2017-01-29", "2017-01-30", "2017-01-31", "2017-02-01", "2017-02-02", "2017-02-03", "2017-02-04", "2017-02-05", "2017-02-06", "2017-02-07", "2017-02-08", "2017-02-09", "2017-02-10", "2017-02-11", "2017-02-12", "2017-02-13", "2017-02-14", "2017-02-15", "2017-02-16", "2017-02-17", "2017-02-18", "2017-02-19", "2017-02-20", "2017-02-21", "2017-02-22", "2017-02-23", "2017-02-24", "2017-02-25", "2017-02-26", "2017-02-27", "2017-02-28", "2017-03-01", "2017-03-02", "2017-03-03", "2017-03-04", "2017-03-05", "2017-03-06", "2017-03-07", "2017-03-08", "2017-03-09", "2017-03-10", "2017-03-11", "2017-03-12", "2017-03-13", "2017-03-14", "2017-03-15", "2017-03-16", "2017-03-17", "2017-03-18", "2017-03-19", "2017-03-20", "2017-03-21", "2017-03-22", "2017-03-23", "2017-03-24", "2017-03-25", "2017-03-26", "2017-03-27", "2017-03-28", "2017-03-29", "2017-03-30", "2017-03-31", "2017-04-01", "2017-04-02", "2017-04-03", "2017-04-04", "2017-04-05", "2017-04-06", "2017-04-07", "2017-04-08", "2017-04-09", "2017-04-10", "2017-04-11", "2017-04-12", "2017-04-13", "2017-04-14", "2017-04-15", "2017-04-16", "2017-04-17", "2017-04-18", "2017-04-19", "2017-04-20", "2017-04-21", "2017-04-22", "2017-04-23", "2017-04-24", "2017-04-25", "2017-04-26", "2017-04-27", "2017-04-28", "2017-04-29", "2017-04-30", "2017-05-01", "2017-05-02", "2017-05-03", "2017-05-04", "2017-05-05", "2017-05-06", "2017-05-07", "2017-05-08", "2017-05-09", "2017-05-10", "2017-05-12", "2017-05-13", "2017-05-14", "2017-05-15", "2017-05-16", "2017-05-17", "2017-05-18", "2017-05-19", "2017-05-20", "2017-05-21", "2017-05-22", "2017-05-23", "2017-05-24", "2017-05-25", "2017-05-26", "2017-05-27", "2017-05-28", "2017-05-29", "2017-05-30", "2017-05-31", "2017-06-01", "2017-06-02", "2017-06-03", "2017-06-04", "2017-06-05", "2017-06-06", "2017-06-07", "2017-06-08", "2017-06-09", "2017-06-10", "2017-06-11", "2017-06-12", "2017-06-13", "2017-06-14", "2017-06-15", "2017-06-16", "2017-06-17", "2017-06-18", "2017-06-19", "2017-06-20", "2017-06-21", "2017-06-22", "2017-06-23", "2017-06-24", "2017-06-25", "2017-06-26", "2017-06-27", "2017-06-28", "2017-06-29", "2017-06-30", "2017-07-01", "2017-07-02", "2017-07-03", "2017-07-04", "2017-07-05", "2017-07-06", "2017-07-07", "2017-07-08", "2017-07-09", "2017-07-10", "2017-07-11", "2017-07-12", "2017-07-13", "2017-07-14", "2017-07-15", "2017-07-16", "2017-07-17", "2017-07-18", "2017-07-19", "2017-07-20", "2017-07-21", "2017-07-22", "2017-07-23", "2017-07-24", "2017-07-25", "2017-07-27", "2017-07-28", "2017-07-31", "2017-08-01", "2017-08-02", "2017-08-03", "2017-08-04", "2017-08-05", "2017-08-06", "2017-08-07", "2017-08-08", "2017-08-12", "2017-08-13", "2017-08-14", "2017-08-15", "2017-08-16", "2017-08-17", "2017-08-18", "2017-08-19", "2017-08-20", "2017-08-21", "2017-08-22", "2017-08-23", "2017-08-24", "2017-08-25", "2017-08-26", "2017-08-27", "2017-08-28", "2017-08-30", "2017-08-31", "2017-09-01", "2017-09-03", "2017-09-04", "2017-09-05", "2017-09-06", "2017-09-07", "2017-09-08", "2017-09-09", "2017-09-11", "2017-09-13", "2017-09-14", "2017-09-15", "2017-09-16", "2017-09-17", "2017-09-18", "2017-09-19", "2017-09-20", "2017-09-21", "2017-09-22", "2017-09-23", "2017-09-24", "2017-09-25", "2017-09-27", "2017-09-28", "2017-09-29", "2017-09-30", "2017-10-03", "2017-10-04", "2017-10-05", "2017-10-06", "2017-10-07", "2017-10-08", "2017-10-09", "2017-10-10", "2017-10-11", "2017-10-12", "2017-10-13", "2017-10-14", "2017-10-16", "2017-10-17", "2017-10-18", "2017-10-19", "2017-10-20", "2017-10-21", "2017-10-22", "2017-10-23", "2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27", "2017-10-28", "2017-10-29", "2017-10-30", "2017-10-31", "2017-11-01", "2017-11-02", "2017-11-03", "2017-11-04", "2017-11-05", "2017-11-06", "2017-11-07", "2017-11-08", "2017-11-09", "2017-11-10", "2017-11-11", "2017-11-12", "2017-11-13", "2017-11-14", "2017-11-15", "2017-11-16", "2017-11-17", "2017-11-18", "2017-11-19", "2017-11-20", "2017-11-21", "2017-11-22", "2017-11-23", "2017-11-24", "2017-11-25", "2017-11-26", "2017-11-27", "2017-11-28", "2017-11-29", "2017-11-30", "2017-12-01", "2017-12-02", "2017-12-03", "2017-12-04", "2017-12-06", "2017-12-07", "2017-12-08", "2017-12-09", "2017-12-10", "2017-12-11", "2017-12-12", "2017-12-13", "2017-12-14", "2017-12-15", "2017-12-16", "2017-12-17", "2017-12-18", "2017-12-19", "2017-12-20", "2017-12-21", "2017-12-22", "2017-12-23", "2017-12-24", "2017-12-25", "2017-12-26", "2017-12-27", "2017-12-28", "2017-12-30", "2017-12-31", "2018-01-02", "2018-01-03", "2018-01-04", "2018-01-05", "2018-01-06", "2018-01-07", "2018-01-08", "2018-01-09", "2018-01-10", "2018-01-11", "2018-01-12", "2018-01-13", "2018-01-14", "2018-01-15", "2018-01-16", "2018-01-17", "2018-01-18", "2018-01-19", "2018-01-20", "2018-01-21", "2018-01-22", "2018-01-23", "2018-01-24", "2018-01-25", "2018-01-26", "2018-01-27", "2018-01-29", "2018-01-31", "2018-02-01", "2018-02-02", "2018-02-04", "2018-02-05", "2018-02-06", "2018-02-07", "2018-02-08", "2018-02-10", "2018-02-11", "2018-02-13", "2018-02-14", "2018-02-16", "2018-02-17", "2018-02-18", "2018-02-19", "2018-02-20", "2018-02-21", "2018-02-22", "2018-02-23", "2018-02-24", "2018-02-25", "2018-02-26", "2018-02-27", "2018-03-01", "2018-03-03", "2018-03-05", "2018-03-06", "2018-03-07", "2018-03-08", "2018-03-09", "2018-03-10", "2018-03-11", "2018-03-12", "2018-03-13", "2018-03-14", "2018-03-15", "2018-03-16", "2018-03-17", "2018-03-18", "2018-03-19", "2018-03-20", "2018-03-21", "2018-03-22", "2018-03-23", "2018-03-24", "2018-03-25", "2018-03-26", "2018-03-27", "2018-03-29", "2018-03-30", "2018-04-02", "2018-04-04", "2018-04-05", "2018-04-06", "2018-04-07", "2018-04-08", "2018-04-09", "2018-04-10", "2018-04-11", "2018-04-12", "2018-04-13", "2018-04-14", "2018-04-15", "2018-04-16", "2018-04-17", "2018-04-18", "2018-04-19", "2018-04-20", "2018-04-21", "2018-04-22", "2018-04-23", "2018-04-24", "2018-04-25", "2018-04-26", "2018-04-27", "2018-04-28", "2018-04-29", "2018-04-30", "2018-05-01", "2018-05-02", "2018-05-03", "2018-05-04", "2018-05-05", "2018-05-06", "2018-05-07", "2018-05-08", "2018-05-09", "2018-05-10", "2018-05-12", "2018-05-13", "2018-05-14", "2018-05-15", "2018-05-16", "2018-05-17", "2018-05-18", "2018-05-19", "2018-05-20", "2018-05-21", "2018-05-22", "2018-05-23", "2018-05-24", "2018-05-25", "2018-05-26", "2018-05-27", "2018-05-28", "2018-05-29", "2018-05-30", "2018-05-31", "2018-06-01", "2018-06-02", "2018-06-03", "2018-06-04", "2018-06-05", "2018-06-06", "2018-06-07", "2018-06-08", "2018-06-09", "2018-06-10", "2018-06-11", "2018-06-12", "2018-06-13", "2018-06-14", "2018-06-15", "2018-06-16", "2018-06-17", "2018-06-18", "2018-06-19", "2018-06-20", "2018-06-21", "2018-06-22", "2018-06-24", "2018-06-25", "2018-06-26", "2018-06-27", "2018-06-28", "2018-06-29", "2018-06-30", "2018-07-01", "2018-07-02", "2018-07-03", "2018-07-04", "2018-07-05", "2018-07-06", "2018-07-07", "2018-07-08", "2018-07-09", "2018-07-10", "2018-07-11", "2018-07-12", "2018-07-13", "2018-07-14", "2018-07-15", "2018-07-16", "2018-07-17", "2018-07-18", "2018-07-19", "2018-07-20", "2018-07-21", "2018-07-22", "2018-07-23", "2018-07-24", "2018-07-25", "2018-07-26", "2018-07-27", "2018-07-28", "2018-07-30", "2018-07-31", "2018-08-01", "2018-08-02", "2018-08-03", "2018-08-05", "2018-08-07", "2018-08-08", "2018-08-09", "2018-08-10", "2018-08-11", "2018-08-12", "2018-08-13", "2018-08-15", "2018-08-16", "2018-08-17", "2018-08-18", "2018-08-19", "2018-08-20"],

name:'日期'

},

yAxis: {

splitLine: {show: false},

name:'动态次数'

},

grid: {

bottom: '10%',

top: '12%'

},

series: {

type: 'line',

showSymbol: false,

data: [1, 2, 6, 2, 5, 7, 1, 2, 4, 3, 5, 6, 2, 1, 5, 7, 1, 4, 1, 1, 1, 9, 1, 5, 4, 10, 5, 1, 8, 4, 16, 6, 2, 3, 12, 11, 8, 16, 24, 5, 9, 11, 5, 9, 11, 24, 10, 5, 3, 14, 11, 14, 10, 6, 6, 9, 4, 23, 39, 17, 3, 6, 29, 23, 9, 24, 3, 16, 9, 11, 9, 26, 25, 28, 14, 21, 23, 26, 18, 27, 11, 28, 36, 14, 10, 13, 2, 30, 12, 21, 37, 18, 28, 22, 12, 11, 6, 33, 5, 8, 6, 18, 23, 4, 15, 10, 19, 13, 13, 4, 3, 44, 16, 39, 41, 2, 6, 16, 23, 14, 8, 20, 34, 37, 19, 34, 8, 29, 28, 20, 51, 8, 35, 4, 61, 38, 16, 8, 31, 13, 5, 13, 19, 13, 24, 9, 82, 19, 63, 11, 6, 15, 23, 23, 2, 73, 37, 20, 27, 48, 39, 23, 9, 8, 19, 44, 17, 164, 45, 50, 44, 38, 50, 76, 76, 31, 20, 53, 59, 21, 62, 37, 41, 26, 12, 29, 27, 32, 44, 35, 4, 26, 28, 31, 28, 13, 21, 5, 20, 37, 28, 27, 20, 5, 14, 7, 4, 5, 10, 14, 10, 2, 7, 7, 6, 7, 39, 7, 3, 4, 16, 16, 15, 7, 17, 2, 6, 10, 8, 7, 33, 17, 2, 6, 10, 8, 20, 15, 14, 7, 4, 9, 15, 8, 4, 2, 4, 18, 5, 9, 18, 7, 32, 10, 9, 7, 12, 1, 4, 12, 10, 17, 14, 11, 12, 16, 23, 11, 21, 26, 13, 28, 6, 1, 13, 68, 49, 20, 12, 17, 9, 31, 6, 14, 9, 19, 46, 8, 17, 23, 46, 13, 11, 17, 1, 7, 30, 2, 7, 20, 37, 12, 7, 22, 9, 3, 6, 8, 1, 10, 13, 14, 3, 3, 4, 2, 5, 8, 3, 8, 11, 17, 6, 2, 6, 16, 7, 9, 1, 5, 3, 34, 2, 6, 13, 7, 1, 6, 42, 41, 1, 1, 9, 24, 4, 28, 60, 13, 9, 7, 2, 16, 3, 4, 14, 1, 2, 1, 11, 9, 23, 18, 4, 3, 13, 13, 4, 15, 13, 3, 2, 19, 6, 2, 2, 9, 8, 19, 8, 3, 10, 16, 3, 6, 10, 1, 1, 5, 31, 2, 16, 31, 8, 9, 19, 4, 37, 16, 21, 11, 26, 10, 14, 1, 3, 8, 3, 3, 4, 9, 34, 31, 8, 16, 22, 12, 23, 9, 3, 1, 4, 8, 15, 21, 12, 5, 8, 1, 22, 5, 2, 2, 5, 1, 3, 17, 4, 8, 4, 2, 3, 17, 15, 5, 1, 7, 3, 10, 2, 2, 4, 1, 6, 5, 12, 19, 8, 17, 8, 1, 1, 6, 17, 15, 5, 18, 5, 5, 9, 4, 3, 1, 5, 27, 3, 4, 1, 6, 6, 5, 5, 6, 6, 6, 4, 3, 4, 9, 14, 47, 4, 6, 1, 5, 3, 9, 3, 1, 23, 4, 12, 4, 3, 8, 7, 8, 9, 27, 11, 15, 19, 7, 3, 2, 1, 14, 10, 5, 11, 10, 18, 9, 21, 36, 11, 18, 6, 42, 17, 38, 10, 3, 28, 7, 11, 22, 14, 24, 1, 1, 4, 12, 20, 1, 2, 1, 13, 4, 5, 3, 7, 20, 7, 6, 9, 33, 5, 4, 21, 7, 3, 2, 2, 1, 1, 4, 2, 20, 17, 6, 1, 1, 2, 3, 13, 8, 15, 1, 1, 1, 1, 7, 7, 9, 27, 16, 8, 8, 2, 16, 24, 12, 20, 14, 12, 10, 16, 4, 14, 3, 14, 6, 5, 1, 14, 10, 6, 4, 10, 3, 20, 27, 1, 3, 1, 3, 6, 11, 3, 11, 6, 2, 6, 14, 10, 8, 4, 10, 10, 7, 31, 12, 5, 3, 3, 6, 12, 5, 8, 3, 3, 2, 3, 1, 8, 2, 3, 3, 4, 5, 4, 12, 15, 10, 3, 9, 8, 8, 1, 4, 12, 1, 7, 7, 2, 4, 3, 1, 3, 3, 4, 2, 7, 3]

},

dataZoom: [{

type: 'slider',

show:true,

start: 0,

end:100

},

{

type:'inside',

start: 0,

end:100

}]

};

//*必须，绑定图表自适应功能

window.onresize = function () {

myChart2.resize();

};

// 使用刚指定的配置项和数据显示图表。

myChart2.setOption(option);

82f966e9b7cf

image

柱状图

ECharts入门

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

var myChart4 = echarts.init(document.getElementById('weekline_chart'));

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

var option = {

tooltip : {

trigger: 'axis',

axisPointer : { // 坐标轴指示器，坐标轴触发有效

type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'

}

},

title: {

left: 'center',

text: '一周中的动态情况',

subtext:'数据来源: www.jianshu.com'

},

grid: {

left: '7%',

right: '8%',

bottom: '8%'

},

xAxis : [

{

type : 'category',

data : ["\u5468\u4e00", "\u5468\u4e8c", "\u5468\u4e09", "\u5468\u56db", "\u5468\u4e94", "\u5468\u516d", "\u5468\u65e5"],

axisTick: {

alignWithLabel: true

}

}

],

yAxis : [

{

type : 'value',

name:'动态次数'

}

],

series : [

{

name:'动态次数',

type:'bar',

barWidth: '50%',

data:[1303, 1201, 1296, 1594, 1097, 1122, 1186],

itemStyle: {

normal: {

color: function(params) {

//首先定义一个数组

var colorList = [

'#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3',

'#B74AE5','#0AAF9F','#E89589'

];

return colorList[params.dataIndex]

}

}

}

}

]

};

//*必须，绑定图表自适应功能

window.onresize = function () {

myChart4.resize();

};

// 使用刚指定的配置项和数据显示图表。

myChart4.setOption(option);

82f966e9b7cf

image

气泡图

ECharts入门
一周中发表文章时间频率分布

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

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

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

var hours = ['12am', '1am', '2am', '3am', '4am', '5am', '6am',

'7am', '8am', '9am','10am','11am',

'12pm', '1pm', '2pm', '3pm', '4pm', '5pm',

'6pm', '7pm', '8pm', '9pm', '10pm', '11pm'];

var days = ['周一', '周二',

'周三', '周四', '周五', '周六','周日'];

var data = [[4, 13, 2], [3, 13, 2], [2, 19, 1], [0, 13, 1], [3, 23, 3], [2, 21, 1], [1, 21, 2], [0, 7, 3], [2, 23, 1], [4, 20, 2], [2, 13, 5], [0, 18, 3], [3, 22, 3], [1, 23, 2], [0, 22, 3], [6, 23, 3], [0, 23, 6], [6, 21, 1], [2, 18, 2], [6, 22, 5], [3, 20, 2], [1, 22, 2], [3, 8, 2], [3, 21, 1], [2, 20, 2], [0, 19, 2], [6, 16, 2], [4, 18, 1], [5, 16, 1], [1, 8, 3], [0, 8, 5], [4, 8, 2], [3, 6, 1], [5, 20, 2], [4, 22, 2], [2, 22, 3], [5, 10, 1], [3, 9, 3], [2, 16, 2], [5, 17, 1], [1, 19, 1], [6, 20, 1], [2, 7, 1], [1, 20, 2], [2, 15, 1], [5, 23, 1], [4, 6, 1], [6, 14, 2], [5, 13, 1], [6, 15, 1], [2, 14, 2], [1, 16, 1], [4, 16, 1], [1, 14, 3], [6, 12, 1], [4, 12, 1], [2, 17, 1], [1, 17, 1], [1, 10, 1], [6, 13, 2], [6, 1, 1], [4, 14, 1], [0, 21, 1], [4, 17, 1], [0, 9, 2], [3, 7, 1], [6, 11, 1], [0, 17, 1], [2, 0, 1], [3, 0, 1], [6, 18, 1], [4, 23, 1], [5, 21, 1], [4, 15, 1], [2, 8, 1], [6, 0, 1], [1, 1, 1], [5, 22, 1]];

var option = {

tooltip: {

position: 'left'

},

title: [],

color:['#FF6666','#EFE42A','#64BD3D','#EE9201','#29AAE3',

'#B74AE5','#0AAF9F','#E89589'],

singleAxis: [],

series: []

};

echarts.util.each(days, function (day, idx) {

option.title.push({

textBaseline: 'middle',

top: (idx + 0.5) * 100 / 7 + '%',

text: day

});

option.singleAxis.push({

left: 120,

type: 'category',

boundaryGap: false,

data: hours,

top: (idx * 100 / 7 + 5) + '%',

height: (100 / 7 - 10) + '%',

axisLabel: {

interval: 2

}

});

option.series.push({

singleAxisIndex: idx,

coordinateSystem: 'singleAxis',

type: 'scatter',

data: [],

symbolSize: function (dataItem) {

return dataItem[1]/6 * 100;

}

});

});

echarts.util.each(data, function (dataItem) {

option.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);

});

//*必须，绑定图表自适应功能

window.onresize = function () {

myChart.resize();

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

82f966e9b7cf

image

词云

ECharts入门

共写下评论 6559 条，以下词语出现频率较高

var myChart_11eb85c7b04b42a1ab8f1883a090eb59 = echarts.init(document.getElementById('11eb85c7b04b42a1ab8f1883a090eb59'), 'light', {renderer: 'canvas'});

var option_11eb85c7b04b42a1ab8f1883a090eb59 = {

"title": [

{

"left": "auto",

"top": "auto",

"textStyle": {

"fontSize": 18

},

"subtextStyle": {

"fontSize": 12

}

}

],

"toolbox": {

"show": true,

"orient": "vertical",

"left": "95%",

"top": "center",

"feature": {

"saveAsImage": {

"show": true,

"title": "\u4e0b\u8f7d\u56fe\u7247"

},

"restore": {

"show": true

},

"dataView": {

"show": true

}

}

},

"series_id": 7907133,

"tooltip": {

"trigger": "item",

"triggerOn": "mousemove|click",

"axisPointer": {

"type": "line"

},

"textStyle": {

"fontSize": 14

},

"backgroundColor": "rgba(50,50,50,0.7)",

"borderColor": "#333",

"borderWidth": 0

},

"series": [

{

"type": "wordCloud",

"shape": "diamond",

"rotationRange": [

0,

0

],

"rotationStep": 45,

"girdSize": 20,

"sizeRange": [

15,

120

],

"data": [

{

"name": "\u81ea\u5df1",

"value": 453,

"textStyle": {

"normal": {

"color": "rgb(89,84,114)"

}

}

},

{

"name": "\u53ef\u4ee5",

"value": 404,

"textStyle": {

"normal": {

"color": "rgb(112,20,77)"

}

}

},

{

"name": "\u77e5\u9053",

"value": 322,

"textStyle": {

"normal": {

"color": "rgb(36,100,80)"

}

}

},

{

"name": "\u6587\u7ae0",

"value": 318,

"textStyle": {

"normal": {

"color": "rgb(131,90,7)"

}

}

},

{

"name": "\u4e0d\u662f",

"value": 282,

"textStyle": {

"normal": {

"color": "rgb(136,7,65)"

}

}

},

{

"name": "\u5c31\u662f",

"value": 246,

"textStyle": {

"normal": {

"color": "rgb(115,135,115)"

}

}

},

{

"name": "\u53ef\u80fd",

"value": 191,

"textStyle": {

"normal": {

"color": "rgb(30,21,126)"

}

}

},

{

"name": "\u4e0d\u77e5",

"value": 177,

"textStyle": {

"normal": {

"color": "rgb(109,135,125)"

}

}

},

{

"name": "\u751f\u6d3b",

"value": 173,

"textStyle": {

"normal": {

"color": "rgb(137,143,23)"

}

}

},

{

"name": "\u771f\u7684",

"value": 170,

"textStyle": {

"normal": {

"color": "rgb(121,158,12)"

}

}

},

{

"name": "\u5f88\u591a",

"value": 166,

"textStyle": {

"normal": {

"color": "rgb(5,25,78)"

}

}

},

{

"name": "\u4e8b\u60c5",

"value": 155,

"textStyle": {

"normal": {

"color": "rgb(141,103,120)"

}

}

},

{

"name": "\u597d\u50cf",

"value": 154,

"textStyle": {

"normal": {

"color": "rgb(13,72,149)"

}

}

},

{

"name": "\u5b69\u5b50",

"value": 150,

"textStyle": {

"normal": {

"color": "rgb(73,35,117)"

}

}

},

{

"name": "\u52a0\u6cb9",

"value": 150,

"textStyle": {

"normal": {

"color": "rgb(70,144,105)"

}

}

},

{

"name": "\u770b\u5230",

"value": 141,

"textStyle": {

"normal": {

"color": "rgb(71,135,3)"

}

}

},

{

"name": "\u4e00\u8d77",

"value": 141,

"textStyle": {

"normal": {

"color": "rgb(60,21,152)"

}

}

},

{

"name": "\u5e0c\u671b",

"value": 139,

"textStyle": {

"normal": {

"color": "rgb(3,66,97)"

}

}

},

{

"name": "\u6545\u4e8b",

"value": 136,

"textStyle": {

"normal": {

"color": "rgb(155,66,130)"

}

}

},

{

"name": "\u5982\u679c",

"value": 135,

"textStyle": {

"normal": {

"color": "rgb(4,70,45)"

}

}

},

{

"name": "\u6240\u4ee5",

"value": 128,

"textStyle": {

"normal": {

"color": "rgb(73,100,134)"

}

}

},

{

"name": "\u4eca\u5929",

"value": 126,

"textStyle": {

"normal": {

"color": "rgb(86,119,29)"

}

}

},

{

"name": "\u53ea\u662f",

"value": 121,

"textStyle": {

"normal": {

"color": "rgb(18,33,113)"

}

}

}

]

}

],

"legend": [

{

"data": [],

"selectedMode": "multiple",

"show": true,

"left": "center",

"top": "top",

"orient": "horizontal",

"textStyle": {

"fontSize": 12

}

}

],

"color": [

"#c23531",

"#2f4554",

"#61a0a8",

"#d48265",

"#749f83",

"#ca8622",

"#bda29a",

"#6e7074",

"#546570",

"#c4ccd3",

"#f05b72",

"#ef5b9c",

"#f47920",

"#905a3d",

"#fab27b",

"#2a5caa",

"#444693",

"#726930",

"#b2d235",

"#6d8346",

"#ac6767",

"#1d953f",

"#6950a1",

"#918597",

"#f6f5ec"

]

};

myChart_11eb85c7b04b42a1ab8f1883a090eb59.setOption(option_11eb85c7b04b42a1ab8f1883a090eb59);

82f966e9b7cf

image

退乎了芜湖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts链接MySQL
02-09
代码实现了实时取得MySQL数据的数据在echarts进行展现
echarts mysql api_利用ECharts可视化mysql数据库中的数据
weixin_39622760的博客
02-01 769
这是工程所有文件的一个目录工程文件目录我做了一个柱状图，一个饼状图，一个折线图，配置过程很恶心，出了好多错，所以在这里记录一下。如果想直接看 echarts 的部分，可以跳过下面数据库的建立。数据库的建立与获取数据首先是建立数据库数据库表结构这里主要用 bistu 数据库下面的 goods 这个表，这是一个商品表，有 商品编号， 商品名称， 商品价格， 商品销量， 商品库存， 商品详情。然后导入 ...
编写web程序，基于echarts将Mysql表数据进行可视化展示及Hadoop学习心得
Drejian的博客
06-29 1729
将Mysql表数据可视化展示在Web程序中可以借助ECharts这样的图表库来实现。通过Web程序连接MySQL数据库，获取数据后，使用ECharts图表库将数据转换为可视化图表展示在Web页面上。这样用户可以通过浏览器访问Web程序，直观地看到MySQL表中的数据关系和统计结果。总结以上的内容，我们讨论了一个代码示例和一个关于《Hadoop核心技术》课程学习心得的主题。这些内容涵盖了代码的解析和对《Hadoop核心技术》课程的学习心得的总结。
Echarts可视化MySQL数据
weixin_46899412的博客
01-12 3127
Echarts，MySQL
echarts搭配MySQL_Echarts连接Mysql使用心得
weixin_28748675的博客
02-04 3088
Echarts是什么，它一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。它可以轻易的作出类似这样：或这样的美观可视化图：当别人在使用各种图来表示各项数据之间的联系时，我还在使用Low到爆的表格那种用户体验感受属实不太妙。可视化图相较于表格那一行...
爬取简书文章.zip
07-08
使用Scrapy+ Selenium+ChromeDriver爬取简书所有文章，然后存储到mysql数据库中，作为爬虫的练习。当然也可以用这些文章进行数据分析等等。 该压缩包有项目的完整源码和数据库的sql文件。读者可以直接使用。
echart 连接mysql 例子
01-30
echart 连接MySQL 数据库的例子，jar 包已加载，欢迎大家下载
PHP+MYSQL 可视化Echarts 完整源码，小白总结
weixin_30219751的博客
10-06 2483
三、建议学习 var_dump($变量名) 的使用，如var_dump($link), var_dump($sql)等，我主要用于数据库连接后 select 查询代码输出的结果调试，调试前，记录先把跳转代码给注释，逐步调试，再看呈现的数据是不是自己要的结果，因为新手，理解 mysqli_fetch_array ，mysqli_fetch_row，mysqli_fetch_ASSOC 有点困难。PHP 版本：7.9.1，MYSQL：5.7.26，WEB 服务器：小皮PHPSTUDY_PRO 8.1。
利用echarts可视化mysql_使用ECharts对数据进行可视化-阿里云开发者社区
weixin_39662462的博客
02-04 828
通过对数据可视化，可以让数据更容易理解，激发数据使用者的 想象力。在阿里云上，可以使用DataV进行数据的可视化。在阿里云下，可以使用ECharts进行数据的可视化。下面，是使用ECharts对数据进行可视化的例子。准备搭建好Apache 2+PHP 7+MySQL 5环境从http://echarts.baidu.com/download.html下载echarts.js从http://jque...
echarts+Servlet+mysql从数据库获取数据实现简单图表展示
03-17
用Servlet实现的echarts展示两种不同形式图表的小demo，使用的开发工具是eclipse，数据库是mysql。文件中包含项目源码，对应的数据库，以及项目运行后实现的图表截图（含url）。项目本人亲测，可完美展示图表，若有疑问，可Email我，Email：bpcforevery@gmail.com 。（ps:本人在另一个上传的文件中实现了用SSM框架实现的echarts展示图表的小demo，使用的数据库也是mysql，感兴趣的可以去看看）。
利用ECharts可视化mysql数据库中的数据
热门推荐
superliug的博客
08-06 1万+
利用ECharts可视化mysql数据库中的数据 技术实现背景 在我们的日常开发中我们经常使用到各种各样的数据进行相关的功能的开发，在这个过程中我们可以用到各种各样的图表来分析和实现我们的需求，很多的时候我们可以进行相关的功能的分析和判断，在这个过程中我们就需要从数据库中读取的数据使用Echarts来进行相关的功能的分析，下图所示即为我们要实现的细节性，在这个过程中我们注意是Echarts的相关的功能的研究，然后是我们的进行相关的分析功能，下图即为我们要把我们的功能进行相关的数据库中的数据在前端进行相关的功
新能源车辆数据可视化：编写一个web程序，基于echarts将Mysql表数据进行可视化展示
endir_Xiao_ai的博客
06-28 766
了解链接MySQL的数据代码，认识HTML网页的基础与要制作的图形即可即可轻松完成。
Springboot+mysql+maven+echarts实现数据可视化
最新发布
black0311的专栏
10-31 545
/这里ContentType的值一般来说有两种取值, 默认是application/x-www-form-urlencoded;// contentType: 'application/json',//contentType: 前端的参数格式。dataType:"json",//dataType:接口返回的数据的格式,一般来说,经常不写,让系统自己去判定。type:"post",//type:标明是get还是post请求。url:"/getdata",//url:请求后台的url。//数组（Y坐标值）
从mysql拉取sql数据到echarts地图数据格式
weixin_55694535的博客
06-06 245
从mysql拉取sql数据到echarts地图数据格式
python连接Mysql数据库并使用pyEcharts绘图
ali_gaduo的博客
10-31 1329
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。pyEcharts库是一个用于生成 ECharts 图表的类库。开始来绘制你的第一个图表。
【小白适用】Django+Echarts+Mysql
qq_43564015的博客
07-04 2774
Django+Echarts+Mysql
Echarts动态显示MySQL数据库中的数据
yunlong_G的博客
06-10 1万+
Echarts动态显示MySQL数据库中的数据下载echarts并进行简单绘图下载和配置简单绘图实时显示数据库数据Apache24的安装构建项目mysql数据库的表格创建获取数据的php文件编写说一下如何运行这个php文件可以实时显示数据库信息的test2.html编写运行及结果展示总结感悟 下载echarts并进行简单绘图 下载和配置 最近在学习利用echarts进行数据可视化，简单画一个表格比较简单，去官网https://echarts.apache.org/en/index.html下载解压好echa
echarts mysql_ECharts实现mysql 数据图表化
weixin_39977547的博客
01-19 1628
采用Ajax，通过php，从mysql取出数据，然后将数据使用ECharts展示。如果想要动态刷新图标，那么设置一个定时器，定时取数，就可以达到目的。数据库数据库名：kali表名：ecahrts字段有：id city sun av qs详细结构如下：Idcitysunavqs1我150067813422非180046512453常20003466654的120045614325帅175078541...
mysql json查询 简书
09-07
在MySQL中，可以使用JSON类型进行数据存储和查询。JSON字段的数据类型支持存储JSON数组和JSON对象。对于JSON查询，有几种常用的方法。 1. 插入JSON数据的方式有两种：可以直接插入JSON数组或JSON对象作为字段值。 2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值